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



<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中往左偏了。
大家仔细看图就会发现。。

我想问下现在该怎么改呢？ --------------------编程问答-------------------- 图片太大，大家另存为看下。 --------------------编程问答-------------------- 前台页面最好不要用table,还是用div+css来设计比较好，出现这种情况，你只有对不同的游览器进行hack。要针对不痛的游览器写css代码 --------------------编程问答--------------------

引用 2 楼 micky19 的回复:

前台页面最好不要用table,还是用div+css来设计比较好，出现这种情况，你只有对不同的游览器进行hack。要针对不痛的游览器写css代码

我现在的这个系统只要求在IE中兼容就好。
PS：这是先人留下来的CSS，
我可不想全部改完。同时要我全部自己写CSS也不会。
CSS只看得懂大部分。 --------------------编程问答-------------------- background-repeat: no-repeat; width: 992px; height: 620px;
不懂css,是不是这句的问题??
width: 100%; height: 100%;
这样行吗? --------------------编程问答--------------------

引用 4 楼 fdh120 的回复:

background-repeat: no-repeat; width: 992px; height: 620px;
不懂css,是不是这句的问题??
width: 100%; height: 100%;
这样行吗?

这样弄的话，背景图是居中的
可是底下空白还是存在啊
--------------------编程问答-------------------- 这个没办法的，只能用js来实现让body占满整个浏览器了
if (document.body.clientHeight<document.documentElement.clientHeight)
{
document.getElementById("最外层表格的id").style.height=document.documentElement.clientHeight+'px';
} --------------------编程问答--------------------

引用 6 楼 beyond_me21 的回复:

这个没办法的，只能用js来实现让body占满整个浏览器了
if (document.body.clientHeight<document.documentElement.clientHeight)
{
document.getElementById("最外层表格的id").style.height=document.documentElement.clientHeight+'px';
}……

我试试。 --------------------编程问答-------------------- 没什么效果。 --------------------编程问答--------------------

--------------------编程问答--------------------

--------------------编程问答-------------------- 这个应该不是兼容问题，就是你的样式没调好而已！！ --------------------编程问答-------------------- 这个应该不是兼容问题，就是你的样式没调好而已！！ --------------------编程问答-------------------- 界面的问题，真的是？？？ --------------------编程问答--------------------

引用 12 楼 lester19872007 的回复:

这个应该不是兼容问题，就是你的样式没调好而已！！

那为什么在ie 7 和 ie 8下不同的结果？ --------------------编程问答-------------------- 我给TextBox加背景也遇到这样的问题，还没解决呢
不过LZ，用很大的一张图做背景？ --------------------编程问答--------------------

引用 16 楼 ihandler 的回复:

我给TextBox加背景也遇到这样的问题，还没解决呢
不过LZ，用很大的一张图做背景？

是啊，先人留下来的。难不成我现在还给这个页面整体做手术？
那不可能的事情。 --------------------编程问答-------------------- 你把你的 {margin:0; }
改为 {margin:0 auto;}
设置居中! --------------------编程问答-------------------- 你的背景在IE 8 偏左的话在背景的样式哪里加个 background-position:center --------------------编程问答--------------------

引用 19 楼 yw39019724 的回复:

你的背景在IE 8 偏左的话在背景的样式哪里加个 background-position:center

背景这个样式一直都加有background-position:center --------------------编程问答-------------------- 我把你的页面代码复制下来在我的IE 8和IE7 运行并没有你说的那个情况！
在样式方面也没什么问题! --------------------编程问答-------------------- 路过JF~ --------------------编程问答-------------------- tyuuu --------------------编程问答-------------------- 顶起、、、 --------------------编程问答--------------------

<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>

在HTML 上面加上这段代码就行啦，让它遇到IE8 的时候强制执行IE7

--------------------编程问答--------------------

引用 25 楼 asp20008 的回复:

CSS code
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
在HTML 上面加上这段代码就行啦，让它遇到IE8 的时候强制执行IE7

这样搞有啥意义。。 --------------------编程问答-------------------- 图片没看到

每个浏览器的每个版本都是有差异的

兼容一览表 --------------------编程问答--------------------

引用 26 楼 xupeihuagudulei 的回复:

引用 25 楼 asp20008 的回复:

CSS code
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
在HTML 上面加上这段代码就行啦，让它遇到IE8 的时候强制执行IE7
这样搞有啥意义。。

你这个页面可以网上浏览吗，这样比较好处理，有些背景图看不到 --------------------编程问答-------------------- <meta http-equiv="x-ua-compatible" content="ie=7" /> 加上这个试一试 --------------------编程问答-------------------- --------------------编程问答-------------------- 还没解决?

你把那个div或者table的bottom设为0看看 --------------------编程问答-------------------- 设置居中只要把两边同时设置就可以了，这样应该就不会串了

补充：.NET技术 ,  ASP.NET