【提问】CSS在IE7、IE8兼容问题

xupeihuagudulei9 2010-07-07 11:21:20 


<body onload="MM_preloadImages('images/loginbutton_hover.gif');">

    <form id="form1" runat="server">

    <table style="width: 100%; height: 100%; vertical-align: middle; background-color: #02528f"

        border="0px" cellpadding="0px" cellspacing="0px">

        <tr>

            <td style="width: 100%; height: 100%; vertical-align: middle;">

                <table border="0" cellpadding="0" cellspacing="0" style="background-image: url(images/loginbg.gif);

                    background-position: center; background-repeat: no-repeat; width: 992px; height: 840px;

                    vertical-align: middle;">

                    <tr>

                        <td width="350" height="130">

                        </td>

                        <td width="204">

                        </td>

                        <td width="93">

                        </td>

                        <td width="66">

                        </td>

                        <td width="73">

                        </td>

                        <td width="64">

                        </td>

                        <td width="142">

                        </td>

                    </tr>

                    <tr>

                        <td height="100">

                        </td>

                        <td colspan="5" valign="top">

                        </td>

                        <!--此单元格为出错提示部分 -->

                        <td>

                        </td>

                    </tr>

                    <tr>

                        <td height="15">

                        </td>

                        <td>

                        </td>

                        <td>

                        </td>

                        <td>

                        </td>

                        <td>

                        </td>

                        <td>

                        </td>

                        <td>

                        </td>

                    </tr>

                    <tr>

                        <td height="28">

                        </td>

                        <td>

                        </td>

                        <td>

                        </td>

                        <td align="right" valign="middle" class="word">

                            <asp:Localize ID="lcalUserName" runat="server" meta:resourcekey="lcalUserNameResource1"

                                Text="用户名:"></asp:Localize>

                        </td>

                        <td style="width: 20px">

                             

                        </td>

                        <td valign="middle" align="left">

                            <label>

                                 <asp:TextBox ID="UserNameText" Width="150px" runat="server" dataType="UserName"

                                    require="true" CssClass="inputborder" meta:resourcekey="UserNameTextResource1"></asp:TextBox>

                            </label>

                        </td>

                        <td>

                        </td>

                    </tr>

                    <tr>

                        <td height="28">

                        </td>

                        <td>

                        </td>

                        <td>

                        </td>

                        <td align="right" valign="middle" class="word">

                            <asp:Localize ID="lcalPwd" runat="server" meta:resourcekey="lcalPwdResource1" Text="密&nbsp;&nbsp;码:"></asp:Localize>

                        </td>

                        <td style="width: 20px">

                             

                        </td>

                        <td valign="middle" align="left">

                            <label>

                                 <asp:TextBox ID="UserPasswordText" Width="150px" runat="server" TextMode="Password"

                                    dataType="UserPassword" require="true" CssClass="inputborder" meta:resourcekey="UserPasswordTextResource1"></asp:TextBox>

                            </label>

                        </td>

                        <td>

                        </td>

                    </tr>

                    <tr>

                        <td height="12">

                        </td>

                        <td>

                        </td>

                        <td>

                        </td>

                        <td>

                        </td>

                        <td>

                        </td>

                        <td>

                        </td>

                        <td>

                        </td>

                    </tr>

                    <tr>

                        <td height="30">

                             

                        </td>

                        <td>

                             

                        </td>

                        <td>

                             

                        </td>

                        <td colspan="2" align="left">

                             <br />

                            <br />

                            <%-- <a href="~/SetIE.hta" target="_blank" id="HyperLink2" runat="server">设置IE安全级别</a>--%>

                             <a href="~/SetIE.hta" target="_blank" id="HyperLink2" runat="server"><asp:Localize

                                ID="lcalIE" runat="server" meta:resourcekey="lcalIEResource1" Text="设置IE安全级别"></asp:Localize></a>

                             

                        </td>

                        <td style="padding-left: 90px" align="left" valign="middle">

                            <cc1:SButton ID="BtnOK" ButtonClass="LoginButton" OnMouseOver="ButtonOverCSS(this)"

                                OnMouseOut="ButtonOutCSS(this)" runat="server" Text="" OnClick="BtnOK_Click"

                                JsPath="JS" ValidateForm="True">

                            </cc1:SButton>

                        </td>

                        <td>

                             

                        </td>

                    </tr>

                    <tr>

                        <td height="150">

                             

                        </td>

                        <td>

                             

                        </td>

                        <td>

                             

                        </td>

                        <td>

                             

                        </td>

                        <td>

                             

                        </td>

                        <td>

                             

                        </td>

                        <td>

                             

                        </td>

                    </tr>

                    <tr>

                        <td height="31">

                             

                        </td>

                        <td>

                             

                        </td>

                        <td colspan="4" valign="bottom" class="copyright">

                            <asp:Localize ID="lcalCopyright" runat="server" meta:resourcekey="lcalCopyrightResource1"

                                Text="版权所有 &copy;保留所有权利."></asp:Localize>

                        </td>

                        <td>

                             

                        </td>

                    </tr>

                    <tr>

                        <td height="70">

                             

                        </td>

                        <td>

                             

                        </td>

                        <td>

                             

                        </td>

                        <td>

                             

                        </td>

                        <td>

                             

                        </td>

                        <td>

                             

                        </td>

                        <td>

                             

                        </td>

                    </tr>

                </table>

            </td>

        </tr>

    </table>

    </form>

</body>


先说明目前布局。
一个Table里有一个td
TD里再放一个talbe这样的。
最主要的CSS也就这些
///////////////
<table style="width: 100%; height: 100%; vertical-align: middle; background-color: #02528f"
border="0px" cellpadding="0px" cellspacing="0px">
<tr>
<td style="width: 100%; height: 100%; vertical-align: middle;">
<table border="0" cellpadding="0" cellspacing="0" style="background-image: url(images/loginbg.gif);
background-position: center; background-repeat: no-repeat; width: 992px; height: 620px;
vertical-align: middle;">
还有就是html,body{weight:100%;height:100%;margin:0;}


但是我现在这个页面在ie7和ie8下面的格式完全变了。(在IE7下没事。显示正常。)
IE7的图：

IE8的图：

也就是下面多了1/3的空白。
还有就是背景图在ie7下是剧中的。
而在ie8中往左偏了。
大家仔细看图就会发现 。。



我想问下现在该怎么改呢？
...全文
403 29 打赏 收藏 转发到动态 举报
写回复
用AI写文章
29 条回复
切换为时间正序
请发表友善的回复…
发表回复
橙宝宝 2010-08-06
  • 打赏
  • 举报
 回复
设置居中只要把两边同时设置就可以了，这样应该就不会串了
n109214114 2010-07-08
  • 打赏
  • 举报
 回复
<meta http-equiv="x-ua-compatible" content="ie=7" /> 加上这个试一试
geass 2010-07-08
  • 打赏
  • 举报
 回复
[Quote=引用 26 楼 xupeihuagudulei 的回复:]
引用 25 楼 asp20008 的回复:

CSS code
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
在HTML 上面加上这段代码就行啦，让它遇到IE8 的时候强制执行IE7
这样搞有啥意义。。
[/Quote]
你这个页面可以网上浏览吗，这样比较好处理，有些背景图看不到
xupeihuagudulei 2010-07-08
  • 打赏
  • 举报
 回复
[Quote=引用 25 楼 asp20008 的回复:]

CSS code
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
在HTML 上面加上这段代码就行啦，让它遇到IE8 的时候强制执行IE7
[/Quote]这样搞有啥意义。。
zhoulihong_1986 2010-07-07
  • 打赏
  • 举报
 回复
界面的问题，真的是？？？
lester19872007 2010-07-07
  • 打赏
  • 举报
 回复
这个应该不是兼容问题，就是你的样式没调好而已！！
lester19872007 2010-07-07
  • 打赏
  • 举报
 回复
这个应该不是兼容问题，就是你的样式没调好而已！！
tashiwoweiyi 2010-07-07
  • 打赏
  • 举报
 回复
tashiwoweiyi 2010-07-07
  • 打赏
  • 举报
 回复
xupeihuagudulei 2010-07-07
  • 打赏
  • 举报
 回复
xupeihuagudulei 2010-07-07
  • 打赏
  • 举报
 回复
没什么效果。
xupeihuagudulei 2010-07-07
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 beyond_me21 的回复:]

这个没办法的，只能用js来实现让body占满整个浏览器了
if (document.body.clientHeight<document.documentElement.clientHeight)
{
document.getElementById("最外层表格的id").style.height=document.documentElement.clientHeight+'px';
}……
[/Quote]我试试。
beyond_me21 2010-07-07
  • 打赏
  • 举报
 回复
这个没办法的，只能用js来实现让body占满整个浏览器了
if (document.body.clientHeight<document.documentElement.clientHeight)
{
document.getElementById("最外层表格的id").style.height=document.documentElement.clientHeight+'px';
}
xupeihuagudulei 2010-07-07
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 fdh120 的回复:]

background-repeat: no-repeat; width: 992px; height: 620px;
不懂css,是不是这句的问题??
width: 100%; height: 100%;
这样行吗?
[/Quote]这样弄的话，背景图是居中的
可是底下空白还是存在啊
不懂装懂 2010-07-07
  • 打赏
  • 举报
 回复
background-repeat: no-repeat; width: 992px; height: 620px;
不懂css,是不是这句的问题??
width: 100%; height: 100%;
这样行吗?
xupeihuagudulei 2010-07-07
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 micky19 的回复:]

前台页面最好不要用table,还是用div+css来设计比较好，出现这种情况，你只有对不同的游览器进行hack。要针对不痛的游览器写css代码
[/Quote]我现在的这个系统只要求在IE中兼容就好。
PS：这是先人留下来的CSS，
我可不想全部改完。同时要我全部自己写CSS也不会。
CSS只看得懂大部分。
micky19 2010-07-07
  • 打赏
  • 举报
 回复
前台页面最好不要用table,还是用div+css来设计比较好，出现这种情况，你只有对不同的游览器进行hack。要针对不痛的游览器写css代码
xupeihuagudulei9 2010-07-07
  • 打赏
  • 举报
 回复
图片太大，大家另存为看下。
shaogu8 2010-07-07
  • 打赏
  • 举报
 回复 
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>

在HTML 上面加上这段代码就行啦，让它遇到IE8 的时候强制执行IE7
mm51221 2010-07-07
  • 打赏
  • 举报
 回复
顶起 、、、
加载更多回复（9）
46种常见的浏览器兼容性问题大汇总
2. innerText在IE中能正常工作，但在FireFox中却不行. 3 3. CSS透明 3 4. css中的width和padding 3 5. FF和IE BOX模型解释不一致导致相差2px 3 6. IE5 和IE6的BOX解释不一致 3 7. ul和ol列表缩进问题 3 8. ...
CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法
CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种...
细说CSS(CSS+CSS3)
本课程包含7章45个小节课程，内容涵盖：CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。
DIV+CSS解决IE6，IE7，IE8，FF兼容问题
乐杨俊：DIV+CSS解决IE6，IE7，IE8，FF兼容问题 2011-07-25 21:11:47 DIV+CSS解决IE6，IE7，IE8，FF兼容问题 1.IE8下兼容问题，这个最好处理，转化成IE7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了...
css -- ie兼容写法
简单的记录一下css兼容ie的写法: color:#FF5246; //一般浏览器识别 color:#acacac\9; //IE8,IE9及以上版本识别 *color:#3c3c3c;...然后因为ie版本问题,我们需要兼容一下低版本的ie7 / ie6 因此在通过*color
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章