8个不兼容IE 8的CSS样式写法

最新推荐文章于 2021-08-03 23:48:09 发布

转载最新推荐文章于 2021-08-03 23:48:09 发布 · 3.7k 阅读

文章标签：

#ie #css #xhtml #border #html #div

WEB开发专栏收录该内容

25 篇文章

订阅专栏

本文探讨了Internet Explorer 8相较于IE7在CSS渲染上的主要差异，包括起始坐标位置、DIV内P标签表现、负数margin处理等方面的不同，提供了相应的解决策略。

Internet Explorer 8预设是以CSS 2.1为标准，并修正了许多Internet Explorer 7的CSS Bug，这意味着有一部份以往依据IE 7所设计的网页，
在IE 8上的呈现会有所出入，所幸拜IE 7相容检视功能所赐，目前因使用IE 8而导致版面错误的网站并不多。
但一值依赖IE 7相容检视功能并非长久之计，尽早将网站修改为IE 8相容才是长久之计，因为毕竟CSS是持续更新的，现在不改，日后大修的机会就更大。
不幸的是，Microsoft官方并未提供关于IE 7及IE 8的CSS差异说明文件，顶多只是告诉我们IE 8目前更趋近于CSS 2.1而非CSS 2.0，因此笔者在造访许多网站后，
规类出8个最常见的差异供读者们参考。

1、起始座標位置

先天上，IE 7与IE 8在预设网页版面的起始位置就不同，以下面的代码来说，在IE 7及IE 8上启始的位置就有差异。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div style="height:100px;width:200px; border: solid 1px black">
      <div>
        <a href="http://www.hinet.net">Hinet</a>
      </div>
    </div>
</body>
</html>

(IE7)

(IE8)

不过由于是整个偏移，对网页的影响相当小。

2、DIV中的P

下面的执行结果呈现了IE 7及IE 8在处理DIV中的P之差异性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div style="height:100px;width:200px; border: solid 1px black">
      <div>
        <p>TEST Font</p>
      </div>
    </div>
</body>
</html>

(IE 7)

(IE

很明显的，IE 8中对于DIV中的P预设位置与IE 7不同，IE 7是将margin-top预设为0px，排在最上方，，IE 8却未预设margin-top，

解决方法是将margin-top加上。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div style="height:100px;width:200px; border: solid 1px black">
      <div>
        <p style="margin-top:0px">TEST Font</p>
      </div>
    </div>
</body>
</html>

(IE 8 With margin-top)

3、负数margin

许多网页设计师常常以负数的margin来定位HTML元素的位置，目的是让该元素与图形对齐，IE 7及IE 8对于负数的解释有蛮大的差异性。

程式4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div style="height:100px;width:200px; border: solid 1px black">
      <div style="background-color:Red;margin: -5px 6px 7px 8px">
        <a href="http://www.hinet.net" >Hinet</a>
      </div>
    </div>
</body>
</html>

(IE 7)

(IE8)

由比较图可看出，IE 7遭遇负数时，并不会移出DIV的范围，而IE 8会，在笔者撰写本文之时，大多数的不相容IE8网页错误都源自于此。

4、Table With Border Style

元素的Layout在每个浏览器上都会有些许差异的表现，下面的代码是一个在IE 7及IE 8上呈现相异的范例。 Table

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <table style="border: double 7px green">
    <tr>
    <td style="border: double 1px green">a</td>
    <td style="border: double 1px green">a</td>
    <td style="border: double 1px green">a</td>
    </tr>
    <tr>
    <td style="border: double 1px green">a</td>
    <td style="border: double 1px green">a</td>
    <td style="border: double 1px green">a</td>
    </tr>
    <tr>
    <td style="border: double 1px green">a</td>
    <td style="border: double 1px green">a</td>
    <td style="border: double 1px green">a</td>
    </tr>
    </table>
</body>
</html>

(IE 7)

(IE

很明显的，IE 7的border宽度计算比IE 8高，不过由于这是整体偏移，加上我们很少会设定太大的border宽度，影响程度几乎等于0。

5、bottom、top

当使用绝对位置时，IE 7与IE 8会产生些许的偏移，这些偏移是整体性的，所以影响很小

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div style="height:100px;width:200px; border: solid 1px black">
      <div style="background-color:Red; bottom:5px; top:5px; position:absolute;height:40px" >
      TEST
      </div>
    </div>
</body>
</html>

(IE 7)

(IE

很难看出来吧，因为偏移很小，不过确实是偏移了。

6、li + float

UL、LI加上float，在IE 7于IE 8有相当大的差异，见：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div>
    <div>
        <ul>
            <li style="cursor: hand;float:left; " >
                TEST1 </li>
            <li style="cursor: hand;float:left; ">
                TEST2 </li>
            <li style="cursor: hand;float:left; ">
                TEST3 </li>
            <li style="cursor: hand;float:left; ">
                TEST4 </li>
            <li style="cursor: hand;float:left; ">
                TEST5 </li>
        </ul>
    </div>
    </div>
</body>
</html>

(IE 7)

(IE

在IE 7上，LI的项目符号被取消了，而在IE 8上则正常显示，但却因为是float，所以后面的项目符号盖到前一项目了。修改为程式8的模样后，

两者就趋近相同了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div>
    <div>
        <ul style="list-style-type:none">
            <li style="cursor: hand;float:left; " >
                TEST1 </li>
            <li style="cursor: hand;float:left; ">
                TEST2 </li>
            <li style="cursor: hand;float:left; ">
                TEST3 </li>
            <li style="cursor: hand;float:left; ">
                TEST4 </li>
            <li style="cursor: hand;float:left; ">
                TEST5 </li>
        </ul>
    </div>
    </div>
</body>
</html>

在尝试寻找CSS相异点时，许多网站都有这类问题，因为我们常用这种手法来处理页签类的显示。

PS: list-style-type在IE7时，只要li是float，就会被完全忽略。

7、div + height with ul and image

当DIV设定了固定大小，而内容超出所定大小，然后后方跟着IMG时，在IE 7及IE 8会有相当大的差异。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div>
    <div style="width:300px;height:22px; margin-top:5px">
        <ul style="list-style-type:none">
            <li style="cursor: hand;float:left; " >
                TEST1 </li>
            <li style="cursor: hand;float:left; ">
                TEST2 </li>
            <li style="cursor: hand;float:left; ">
                TEST3 </li>
            <li style="cursor: hand;float:left; ">
                TEST4 </li>
            <li style="cursor: hand;float:left; ">
                TEST5 </li>
            <li style="cursor: hand;float:left; ">
                TEST6 </li>
        </ul>
    </div>
    <a href="http://www.hinet.net>">
    <img src="21565.jpg" width="300px" height="200px" />
    </a>
    </div>
</body>
</html>

(IE 7)

(IE

很明显的，IE 7会尊重DIV所制定的大小来安排后面的IMG位置，所以在图14上看不出有何问题，但是在IE 8里，当内容超出制定大小时，

IMG位置会顺移开，所以就造成了此问题。在实务上，这算是相当常见的相容性错误。

解决方法很简单，将要被盖住的那个LI移掉就好了，这本来就是错误的设计。

8、p的子控件对齐

有些网页设计师习惯使用P加上子控件来描绘单行输入+按纽的样式，这些网页在IE 8上会有或许的差异，如果里面使用的IMG太多，

差异就会大到很难忽视。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p>
      <input type="text" />
      <img src="add2.png" height="16px" width="16px" />
    </p>
</body>
</html>

(IE 7)

(IE

很明显，IE 7会对IMG置中于P，但IE 8不会。这类问题很难解决，需要透过CSS判断IE版本来提供不同的CSS，让两者趋近相同。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <!--[if gte IE 8]>
    <style type="text/css">
        .c1
        {
            position:relative;top:3px
        }
    </style>
    <![endif]-->
    <!--[if lt IE 8]>
    <style type="text/css">
        .c1
        {

        }
    </style>
    <![endif]-->
</head>
<body>
    <p>
      <input type="text"/>
      <img src="add2.png" height="16px" width="16px" class="c1" />
    </p>
</body>
</html>

原文：http://www.dotblogs.com.tw/code6421/archive/2009/04/19/8050.aspx