【提问】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">
                            &nbsp;
                        </td>
                        <td valign="middle" align="left">
                            <label>
                                &nbsp;<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="密&amp;nbsp;&amp;nbsp;码:"></asp:Localize>
                        </td>
                        <td style="width: 20px">
                            &nbsp;
                        </td>
                        <td valign="middle" align="left">
                            <label>
                                &nbsp;<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">
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td colspan="2" align="left">
                            &nbsp;<br />
                            <br />
                            <%--&nbsp;<a href="~/SetIE.hta" target="_blank" id="HyperLink2" runat="server">设置IE安全级别</a>--%>
                            &nbsp;<a href="~/SetIE.hta" target="_blank" id="HyperLink2" runat="server"><asp:Localize
                                ID="lcalIE" runat="server" meta:resourcekey="lcalIEResource1" Text="设置IE安全级别"></asp:Localize></a>
                            &nbsp;
                        </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>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td height="150">
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td height="31">
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td colspan="4" valign="bottom" class="copyright">
                            <asp:Localize ID="lcalCopyright" runat="server" meta:resourcekey="lcalCopyrightResource1"
                                Text="版权所有 &amp;copy;保留所有权利."></asp:Localize>
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td height="70">
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </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的图：
【提问】CSS在IE7、IE8兼容问题

IE8的图：

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

我想问下现在该怎么改呢？

32 个解决方案

#1

图片太大，大家另存为看下。

#2

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

#3

引用 2 楼 micky19 的回复:

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

我现在的这个系统只要求在IE中兼容就好。
PS：这是先人留下来的CSS，
我可不想全部改完。同时要我全部自己写CSS也不会。
CSS只看得懂大部分。

#4

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

#5

引用 4 楼 fdh120 的回复:

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

这样弄的话，背景图是居中的
可是底下空白还是存在啊

#6

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

#7

引用 6 楼 beyond_me21 的回复:

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

我试试。

#8

没什么效果。

#9

#10

#11

#12

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

#13

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

#14

界面的问题，真的是？？？

#15

引用 12 楼 lester19872007 的回复:

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

那为什么在ie 7 和 ie 8下不同的结果？

#16

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

#17

引用 16 楼 ihandler 的回复:

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

是啊，先人留下来的。难不成我现在还给这个页面整体做手术？
那不可能的事情。

#18

你把你的 {margin:0; }
改为 {margin:0 auto;}
设置居中!

#19

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

#20

引用 19 楼 yw39019724 的回复:

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

背景这个样式一直都加有background-position:center

#21

我把你的页面代码复制下来在我的IE 8和IE7 运行并没有你说的那个情况！
在样式方面也没什么问题!

#22

路过JF~

#23

tyuuu

#24

顶起、、、

#25

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

#26

引用 25 楼 asp20008 的回复:

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

这样搞有啥意义。。

#27

图片没看到

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

兼容一览表

#28

引用 26 楼 xupeihuagudulei 的回复:

引用 25 楼 asp20008 的回复:

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

你这个页面可以网上浏览吗，这样比较好处理，有些背景图看不到

#29

#30

该回复于2010-07-27 16:09:35被版主删除

#31

还没解决?

你把那个div或者table的bottom设为0看看

#32

设置居中只要把两边同时设置就可以了，这样应该就不会串了

#1

图片太大，大家另存为看下。

#2

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

#3

引用 2 楼 micky19 的回复:

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

我现在的这个系统只要求在IE中兼容就好。
PS：这是先人留下来的CSS，
我可不想全部改完。同时要我全部自己写CSS也不会。
CSS只看得懂大部分。

#4

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

#5

引用 4 楼 fdh120 的回复:

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

这样弄的话，背景图是居中的
可是底下空白还是存在啊

#6

#7

引用 6 楼 beyond_me21 的回复:

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

我试试。

#8

没什么效果。

#9

#10

#11

#12

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

#13

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

#14

界面的问题，真的是？？？

#15

引用 12 楼 lester19872007 的回复:

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

那为什么在ie 7 和 ie 8下不同的结果？

#16

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

#17

引用 16 楼 ihandler 的回复:

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

是啊，先人留下来的。难不成我现在还给这个页面整体做手术？
那不可能的事情。

#18

你把你的 {margin:0; }
改为 {margin:0 auto;}
设置居中!

#19

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

#20

引用 19 楼 yw39019724 的回复:

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

背景这个样式一直都加有background-position:center

#21

我把你的页面代码复制下来在我的IE 8和IE7 运行并没有你说的那个情况！
在样式方面也没什么问题!

#22

路过JF~

#23

tyuuu

#24

顶起、、、

#25

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

#26

引用 25 楼 asp20008 的回复:

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

这样搞有啥意义。。

#27

图片没看到

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

兼容一览表

#28

引用 26 楼 xupeihuagudulei 的回复:

引用 25 楼 asp20008 的回复:

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

你这个页面可以网上浏览吗，这样比较好处理，有些背景图看不到

#29

#30

该回复于2010-07-27 16:09:35被版主删除

#31

还没解决?

你把那个div或者table的bottom设为0看看

#32

设置居中只要把两边同时设置就可以了，这样应该就不会串了

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

32 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#17

#18

#19

#20

#21

#22

#23

#24

#25

#26

#27

#28

#29

#30

#31

#32

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#17

#18

#19

#20

#21

#22

#23

#24

#25

#26

#27

#28

#29

#30

#31

#32

相关文章