<p>Internet Explorer 8预设是以CSS 2.1为标准，并修正了许多Internet Explorer 7的CSS Bug，这意味着有一部份以往依据IE 7所设计的网页，<br />
在IE 8上的呈现会有所出入，所幸拜IE 7相容检视功能所赐，目前因使用IE 8而导致版面错误的网站并不多。<br />
但一值依赖IE 7相容检视功能并非长久之计，尽早将网站修改为IE 8相容才是长久之计，因为毕竟CSS是持续更新的，现在不改，日后大修的机会就更大。<br />
不幸的是，Microsoft官方并未提供关于IE 7及IE 8的CSS差异说明文件，顶多只是告诉我们IE 8目前更趋近于CSS 2.1而非CSS 2.0，因此笔者在造访许多网站后，<br />
规类出8个最常见的差异供读者们参考。</p>
<h3>1、起始座標位置</h3>
<p>先天上，IE 7与IE 8在预设网页版面的起始位置就不同，以下面的代码来说，在IE 7及IE 8上启始的位置就有差异。</p>
<pre class="code"><span style="color: blue"><!</span><span style="color: #a31515">DOCTYPE </span><span style="color: red">html PUBLIC </span><span style="color: blue">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<</span><span style="color: #a31515">html </span><span style="color: red">xmlns</span><span style="color: blue">="http://www.w3.org/1999/xhtml">
<</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">title</span><span style="color: blue">></</span><span style="color: #a31515">title</span><span style="color: blue">>
</</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">body</span><span style="color: blue">>
<</span><span style="color: #a31515">div </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">height</span>:<span style="color: blue">100px</span>;<span style="color: red">width</span>:<span style="color: blue">200px</span>; <span style="color: red">border</span>: <span style="color: blue">solid 1px black">
<</span><span style="color: #a31515">div</span><span style="color: blue">>
<</span><span style="color: #a31515">a </span><span style="color: red">href</span><span style="color: blue">="http://www.hinet.net"></span>Hinet<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">body</span><span style="color: blue">>
</</span><span style="color: #a31515">html</span><span style="color: blue">></span></pre>
<p> </p>
<p>不过由于是整个偏移，对网页的影响相当小。</p>
<h3>2、DIV中的P</h3>
<p>下面的执行结果呈现了IE 7及IE 8在处理DIV中的P之差异性。</p>
<pre class="code"><span style="color: blue"><!</span><span style="color: #a31515">DOCTYPE </span><span style="color: red">html PUBLIC </span><span style="color: blue">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<</span><span style="color: #a31515">html </span><span style="color: red">xmlns</span><span style="color: blue">="http://www.w3.org/1999/xhtml">
<</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">title</span><span style="color: blue">></</span><span style="color: #a31515">title</span><span style="color: blue">>
</</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">body</span><span style="color: blue">>
<</span><span style="color: #a31515">div </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">height</span>:<span style="color: blue">100px</span>;<span style="color: red">width</span>:<span style="color: blue">200px</span>; <span style="color: red">border</span>: <span style="color: blue">solid 1px black">
<</span><span style="color: #a31515">div</span><span style="color: blue">>
<</span><span style="color: #a31515">p</span><span style="color: blue">></span>TEST Font<span style="color: blue"></</span><span style="color: #a31515">p</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">body</span><span style="color: blue">>
</</span><span style="color: #a31515">html</span><span style="color: blue">></span></pre>
<p> </p>
<p>很明显的，IE 8中对于DIV中的P预设位置与IE 7不同，IE 7是将margin-top预设为0px，排在最上方，，IE 8却未预设margin-top，</p>
<p>解决方法是将margin-top加上。</p>
<pre class="code"><span style="color: blue"><!</span><span style="color: #a31515">DOCTYPE </span><span style="color: red">html PUBLIC </span><span style="color: blue">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<</span><span style="color: #a31515">html </span><span style="color: red">xmlns</span><span style="color: blue">="http://www.w3.org/1999/xhtml">
<</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">title</span><span style="color: blue">></</span><span style="color: #a31515">title</span><span style="color: blue">>
</</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">body</span><span style="color: blue">>
<</span><span style="color: #a31515">div </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">height</span>:<span style="color: blue">100px</span>;<span style="color: red">width</span>:<span style="color: blue">200px</span>; <span style="color: red">border</span>: <span style="color: blue">solid 1px black">
<</span><span style="color: #a31515">div</span><span style="color: blue">>
<</span><span style="color: #a31515">p </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">margin-top</span>:<span style="color: blue">0px"></span>TEST Font<span style="color: blue"></</span><span style="color: #a31515">p</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">body</span><span style="color: blue">>
</</span><span style="color: #a31515">html</span><span style="color: blue">></span></pre>
<p>(IE 8 With margin-top)</p>
<p> </p>
<p> </p>
<h3>3、负数margin</h3>
<p>许多网页设计师常常以负数的margin来定位HTML元素的位置，目的是让该元素与图形对齐，IE 7及IE 8对于负数的解释有蛮大的差异性。</p>
<p>程式4</p>
<pre class="code"><span style="color: blue"><!</span><span style="color: #a31515">DOCTYPE </span><span style="color: red">html PUBLIC </span><span style="color: blue">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<</span><span style="color: #a31515">html </span><span style="color: red">xmlns</span><span style="color: blue">="http://www.w3.org/1999/xhtml">
<</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">title</span><span style="color: blue">></</span><span style="color: #a31515">title</span><span style="color: blue">>
</</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">body</span><span style="color: blue">>
<</span><span style="color: #a31515">div </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">height</span>:<span style="color: blue">100px</span>;<span style="color: red">width</span>:<span style="color: blue">200px</span>; <span style="color: red">border</span>: <span style="color: blue">solid 1px black">
<</span><span style="color: #a31515">div </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">background-color</span>:<span style="color: blue">Red</span>;<span style="color: red">margin</span>: <span style="color: blue">-5px 6px 7px 8px">
<</span><span style="color: #a31515">a </span><span style="color: red">href</span><span style="color: blue">="http://www.hinet.net" ></span>Hinet<span style="color: blue"></</span><span style="color: #a31515">a</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">body</span><span style="color: blue">>
</</span><span style="color: #a31515">html</span><span style="color: blue">></span></pre>
<p> </p>
<p> </p>
<p>由比较图可看出，IE 7遭遇负数时，并不会移出DIV的范围，而IE 8会，在笔者撰写本文之时，大多数的不相容IE8网页错误都源自于此。</p>
<h3>4、Table With Border Style</h3>
<p>元素的Layout在每个浏览器上都会有些许差异的表现，下面的代码是一个在IE 7及IE 8上呈现相异的范例。 Table</p>
<pre class="code"><span style="color: blue"><!</span><span style="color: #a31515">DOCTYPE </span><span style="color: red">html PUBLIC </span><span style="color: blue">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<</span><span style="color: #a31515">html </span><span style="color: red">xmlns</span><span style="color: blue">="http://www.w3.org/1999/xhtml">
<</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">title</span><span style="color: blue">></</span><span style="color: #a31515">title</span><span style="color: blue">>
</</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">body</span><span style="color: blue">>
<</span><span style="color: #a31515">table </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">border</span>: <span style="color: blue">double 7px green">
<</span><span style="color: #a31515">tr</span><span style="color: blue">>
<</span><span style="color: #a31515">td </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">border</span>: <span style="color: blue">double 1px green"></span>a<span style="color: blue"></</span><span style="color: #a31515">td</span><span style="color: blue">>
<</span><span style="color: #a31515">td </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">border</span>: <span style="color: blue">double 1px green"></span>a<span style="color: blue"></</span><span style="color: #a31515">td</span><span style="color: blue">>
<</span><span style="color: #a31515">td </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">border</span>: <span style="color: blue">double 1px green"></span>a<span style="color: blue"></</span><span style="color: #a31515">td</span><span style="color: blue">>
</</span><span style="color: #a31515">tr</span><span style="color: blue">>
<</span><span style="color: #a31515">tr</span><span style="color: blue">>
<</span><span style="color: #a31515">td </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">border</span>: <span style="color: blue">double 1px green"></span>a<span style="color: blue"></</span><span style="color: #a31515">td</span><span style="color: blue">>
<</span><span style="color: #a31515">td </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">border</span>: <span style="color: blue">double 1px green"></span>a<span style="color: blue"></</span><span style="color: #a31515">td</span><span style="color: blue">>
<</span><span style="color: #a31515">td </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">border</span>: <span style="color: blue">double 1px green"></span>a<span style="color: blue"></</span><span style="color: #a31515">td</span><span style="color: blue">>
</</span><span style="color: #a31515">tr</span><span style="color: blue">>
<</span><span style="color: #a31515">tr</span><span style="color: blue">>
<</span><span style="color: #a31515">td </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">border</span>: <span style="color: blue">double 1px green"></span>a<span style="color: blue"></</span><span style="color: #a31515">td</span><span style="color: blue">>
<</span><span style="color: #a31515">td </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">border</span>: <span style="color: blue">double 1px green"></span>a<span style="color: blue"></</span><span style="color: #a31515">td</span><span style="color: blue">>
<</span><span style="color: #a31515">td </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">border</span>: <span style="color: blue">double 1px green"></span>a<span style="color: blue"></</span><span style="color: #a31515">td</span><span style="color: blue">>
</</span><span style="color: #a31515">tr</span><span style="color: blue">>
</</span><span style="color: #a31515">table</span><span style="color: blue">>
</</span><span style="color: #a31515">body</span><span style="color: blue">>
</</span><span style="color: #a31515">html</span><span style="color: blue">></span></pre>
<p> </p>
<p> </p>
<p>很明显的，IE 7的border宽度计算比IE 8高，不过由于这是整体偏移，加上我们很少会设定太大的border宽度，影响程度几乎等于0。</p>
<h3>5、bottom、top</h3>
<p>当使用绝对位置时，IE 7与IE 8会产生些许的偏移，这些偏移是整体性的，所以影响很小</p>
<p>例子：</p>
<pre class="code"><span style="color: blue"><!</span><span style="color: #a31515">DOCTYPE </span><span style="color: red">html PUBLIC </span><span style="color: blue">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<</span><span style="color: #a31515">html </span><span style="color: red">xmlns</span><span style="color: blue">="http://www.w3.org/1999/xhtml">
<</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">title</span><span style="color: blue">></</span><span style="color: #a31515">title</span><span style="color: blue">>
</</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">body</span><span style="color: blue">>
<</span><span style="color: #a31515">div </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">height</span>:<span style="color: blue">100px</span>;<span style="color: red">width</span>:<span style="color: blue">200px</span>; <span style="color: red">border</span>: <span style="color: blue">solid 1px black">
<</span><span style="color: #a31515">div </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">background-color</span>:<span style="color: blue">Red</span>; <span style="color: red">bottom</span>:<span style="color: blue">5px</span>; <span style="color: red">top</span>:<span style="color: blue">5px</span>; <span style="color: red">position</span>:<span style="color: blue">absolute</span>;<span style="color: red">height</span>:<span style="color: blue">40px" >
</span>TEST
<span style="color: blue"></</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">body</span><span style="color: blue">>
</</span><span style="color: #a31515">html</span><span style="color: blue">></span></pre>
<p> </p>
<p> </p>
<p>很难看出来吧，因为偏移很小，不过确实是偏移了。</p>
<h3>6、li + float</h3>
<p>UL、LI加上float，在IE 7于IE 8有相当大的差异，见：</p>
<pre class="code"><span style="color: blue"><!</span><span style="color: #a31515">DOCTYPE </span><span style="color: red">html PUBLIC </span><span style="color: blue">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<</span><span style="color: #a31515">html </span><span style="color: red">xmlns</span><span style="color: blue">="http://www.w3.org/1999/xhtml">
<</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">title</span><span style="color: blue">></</span><span style="color: #a31515">title</span><span style="color: blue">>
</</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">body</span><span style="color: blue">>
<</span><span style="color: #a31515">div</span><span style="color: blue">>
<</span><span style="color: #a31515">div</span><span style="color: blue">>
<</span><span style="color: #a31515">ul</span><span style="color: blue">>
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">" >
</span>TEST1 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">">
</span>TEST2 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">">
</span>TEST3 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">">
</span>TEST4 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">">
</span>TEST5 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
</</span><span style="color: #a31515">ul</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">body</span><span style="color: blue">>
</</span><span style="color: #a31515">html</span><span style="color: blue">></span></pre>
<p> </p>
<p>在IE 7上，LI的项目符号被取消了，而在IE 8上则正常显示，但却因为是float，所以后面的项目符号盖到前一项目了。修改为程式8的模样后，</p>
<p>两者就趋近相同了。</p>
<p> </p>
<pre class="code"><span style="color: blue"><!</span><span style="color: #a31515">DOCTYPE </span><span style="color: red">html PUBLIC </span><span style="color: blue">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<</span><span style="color: #a31515">html </span><span style="color: red">xmlns</span><span style="color: blue">="http://www.w3.org/1999/xhtml">
<</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">title</span><span style="color: blue">></</span><span style="color: #a31515">title</span><span style="color: blue">>
</</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">body</span><span style="color: blue">>
<</span><span style="color: #a31515">div</span><span style="color: blue">>
<</span><span style="color: #a31515">div</span><span style="color: blue">>
<</span><span style="color: #a31515">ul </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">list-style-type</span>:<span style="color: blue">none">
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">" >
</span>TEST1 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">">
</span>TEST2 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">">
</span>TEST3 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">">
</span>TEST4 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">">
</span>TEST5 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
</</span><span style="color: #a31515">ul</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">body</span><span style="color: blue">>
</</span><span style="color: #a31515">html</span><span style="color: blue">></span></pre>
<p>在尝试寻找CSS相异点时，许多网站都有这类问题，因为我们常用这种手法来处理页签类的显示。</p>
<p>PS: list-style-type在IE7时，只要li是float，就会被完全忽略。</p>
<h3>7、div + height with ul and image</h3>
<p>当DIV设定了固定大小，而内容超出所定大小，然后后方跟着IMG时，在IE 7及IE 8会有相当大的差异。</p>
<pre class="code"><span style="color: blue"><!</span><span style="color: #a31515">DOCTYPE </span><span style="color: red">html PUBLIC </span><span style="color: blue">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<</span><span style="color: #a31515">html </span><span style="color: red">xmlns</span><span style="color: blue">="http://www.w3.org/1999/xhtml">
<</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">title</span><span style="color: blue">></</span><span style="color: #a31515">title</span><span style="color: blue">>
</</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">body</span><span style="color: blue">>
<</span><span style="color: #a31515">div</span><span style="color: blue">>
<</span><span style="color: #a31515">div </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">width</span>:<span style="color: blue">300px</span>;<span style="color: red">height</span>:<span style="color: blue">22px</span>; <span style="color: red">margin-top</span>:<span style="color: blue">5px">
<</span><span style="color: #a31515">ul </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">list-style-type</span>:<span style="color: blue">none">
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">" >
</span>TEST1 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">">
</span>TEST2 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">">
</span>TEST3 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">">
</span>TEST4 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">">
</span>TEST5 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
<</span><span style="color: #a31515">li </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">cursor</span>: <span style="color: blue">hand</span>;<span style="color: red">float</span>:<span style="color: blue">left</span>; <span style="color: blue">">
</span>TEST6 <span style="color: blue"></</span><span style="color: #a31515">li</span><span style="color: blue">>
</</span><span style="color: #a31515">ul</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
<</span><span style="color: #a31515">a </span><span style="color: red">href</span><span style="color: blue">="http://www.hinet.net>">
<</span><span style="color: #a31515">img </span><span style="color: red">src</span><span style="color: blue">="21565.jpg" </span><span style="color: red">width</span><span style="color: blue">="300px" </span><span style="color: red">height</span><span style="color: blue">="200px" />
</</span><span style="color: #a31515">a</span><span style="color: blue">>
</</span><span style="color: #a31515">div</span><span style="color: blue">>
</</span><span style="color: #a31515">body</span><span style="color: blue">>
</</span><span style="color: #a31515">html</span><span style="color: blue">></span></pre>
<p> </p>
<p> </p>
<p> </p>
<p>很明显的，IE 7会尊重DIV所制定的大小来安排后面的IMG位置，所以在图14上看不出有何问题，但是在IE 8里，当内容超出制定大小时，</p>
<p>IMG位置会顺移开，所以就造成了此问题。在实务上，这算是相当常见的相容性错误。</p>
<p>解决方法很简单，将要被盖住的那个LI移掉就好了，这本来就是错误的设计。</p>
<h3>8、p的子控件对齐</h3>
<p>有些网页设计师习惯使用P加上子控件来描绘单行输入+按纽的样式，这些网页在IE 8上会有或许的差异，如果里面使用的IMG太多，</p>
<p>差异就会大到很难忽视。</p>
<pre class="code"><span style="color: blue"><!</span><span style="color: #a31515">DOCTYPE </span><span style="color: red">html PUBLIC </span><span style="color: blue">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<</span><span style="color: #a31515">html </span><span style="color: red">xmlns</span><span style="color: blue">="http://www.w3.org/1999/xhtml">
<</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">title</span><span style="color: blue">></</span><span style="color: #a31515">title</span><span style="color: blue">>
</</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">body</span><span style="color: blue">>
<</span><span style="color: #a31515">p</span><span style="color: blue">>
<</span><span style="color: #a31515">input </span><span style="color: red">type</span><span style="color: blue">="text" />
<</span><span style="color: #a31515">img </span><span style="color: red">src</span><span style="color: blue">="add2.png" </span><span style="color: red">height</span><span style="color: blue">="16px" </span><span style="color: red">width</span><span style="color: blue">="16px" />
</</span><span style="color: #a31515">p</span><span style="color: blue">>
</</span><span style="color: #a31515">body</span><span style="color: blue">>
</</span><span style="color: #a31515">html</span><span style="color: blue">></span></pre>
<p> </p>
<p>很明显，IE 7会对IMG置中于P，但IE 8不会。这类问题很难解决，需要透过CSS判断IE版本来提供不同的CSS，让两者趋近相同。</p>
<p> </p>
<pre class="code"><span style="color: blue"><!</span><span style="color: #a31515">DOCTYPE </span><span style="color: red">html PUBLIC </span><span style="color: blue">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<</span><span style="color: #a31515">html </span><span style="color: red">xmlns</span><span style="color: blue">="http://www.w3.org/1999/xhtml">
<</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">title</span><span style="color: blue">></</span><span style="color: #a31515">title</span><span style="color: blue">>
</span><span style="color: green"><!--[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]-->
</span><span style="color: blue"></</span><span style="color: #a31515">head</span><span style="color: blue">>
<</span><span style="color: #a31515">body</span><span style="color: blue">>
<</span><span style="color: #a31515">p</span><span style="color: blue">>
<</span><span style="color: #a31515">input </span><span style="color: red">type</span><span style="color: blue">="text"/>
<</span><span style="color: #a31515">img </span><span style="color: red">src</span><span style="color: blue">="add2.png" </span><span style="color: red">height</span><span style="color: blue">="16px" </span><span style="color: red">width</span><span style="color: blue">="16px" </span><span style="color: red">class</span><span style="color: blue">="c1" />
</</span><span style="color: #a31515">p</span><span style="color: blue">>
</</span><span style="color: #a31515">body</span><span style="color: blue">>
</</span><span style="color: #a31515">html</span><span style="color: blue">>
</span></pre>
<p> </p>
<p>原文：http://www.dotblogs.com.tw/code6421/archive/2009/04/19/8050.aspx</p>