你对IE7和IE8的CSS样式八大差异是否了解，这里和大家分享一下，IE7所设计的网页，在IE8上的呈现会有所出入，所幸拜IE7相容检视功能所赐，目前因使用IE8而导致版面错误的网站并不多。
当雄ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！
IE7和IE8的CSS样式八大差异
InternetExplorer8预设是以CSS2.1为标准，并修正了许多InternetExplorer7的CSSBug，这意味着有一部份以往依据IE7所设计的网页，在IE8上的呈现会有所出入，所幸拜IE7相容检视功能所赐，目前因使用IE8而导致版面错误的网站并不多。但一值依赖IE7相容检视功能并非长久之计，尽早将网站修改为IE8相容才是长久之计，因为毕竟CSS是持续更新的，现在不改，日后大修的机会就更大。不幸的是，Microsoft官方并未提供关于IE7及IE8的CSS差异说明文件，顶多只是告诉我们IE8目前更趋近于CSS2.1而非CSS2.0，因此笔者在造访许多网站后，规类出8个最常见的差异供读者们参考。
1、起始座標位置
先天上，IE7与IE8在预设网页版面的起始位置就不同，以下面的代码来说，在IE7及IE8上启始的位置就有差异。
-
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-
- title> </li>
<li> head> </li>
<li><body> </li>
<li><divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> </li>
<li><div> </li>
<li><ahrefahref="http://www.hinet.net">Hinet a> </li>
<li> div> </li>
<li> div> </li>
<li> body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p>不过由于是整个偏移，对网页的影响相当小。</p><p><strong>2、DIV中的P</strong></p><p>下面的执行结果呈现了IE7及IE8在处理DIV中的P之差异性。<br /></p><pre>
<ol>
<li></li>
<li> </li>
<li>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li>
<li><htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> </li>
<li><head> </li>
<li><title> title> </li>
<li> head> </li>
<li><body> </li>
<li><divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> </li>
<li><div> </li>
<li><p>TESTFont p> </li>
<li> div> </li>
<li> div> </li>
<li> body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p>很明显的，IE8中对于DIV中的P预设位置与IE7不同，IE7是将margin-top预设为0px，排在最上方，，IE8却未预设margin-top，<br />解决方法是将margin-top加上。<br /></p><pre>
<ol>
<li></li>
<li> </li>
<li>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li>
<li><htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> </li>
<li><head> </li>
<li><title> title> </li>
<li> head> </li>
<li><body> </li>
<li><divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> </li>
<li><div> </li>
<li><pstylepstyle="margin-top:0px">TESTFont p> </li>
<li> div> </li>
<li> div> </li>
<li> body> </li>
<li> html> </li>
<li>(IE8Withmargin-top) </li>
<li> </li>
</ol></pre><p> #p#<strong>3、负数margin</strong></p><p>许多网页设计师常常以负数的margin来定位HTML元素的位置，目的是让该元素与图形对齐，IE7及IE8对于负数的解释有蛮大的差异性。<br />程式4<br /></p><pre>
<ol>
<li></li>
<li> </li>
<li>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li>
<li><htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> </li>
<li><head> </li>
<li><title> title> </li>
<li> head> </li>
<li><body> </li>
<li><divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> </li>
<li><divstyledivstyle="background-color:Red;margin:-5px6px7px8px"> </li>
<li><ahrefahref="http://www.hinet.net">Hinet a> </li>
<li> div> </li>
<li> div> </li>
<li> body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p>由比较图可看出，IE7遭遇负数时，并不会移出DIV的范围，而IE8会，在笔者撰写本文之时，大多数的不相容IE8网页错误都源自于此。</p><p><strong>4、TableWithBorderStyle</strong></p><p>元素的Layout在每个浏览器上都会有些许差异的表现，下面的代码是一个在IE7及IE8上呈现相异的范例。Table<br /></p><pre>
<ol>
<li></li>
<li> </li>
<li>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li>
<li><htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> </li>
<li><head> </li>
<li><title> title> </li>
<li> head> </li>
<li><body> </li>
<li><tablestyletablestyle="border:double7pxgreen"> </li>
<li><tr> </li>
<li><tdstyletdstyle="border:double1pxgreen">a td> </li>
<li><tdstyletdstyle="border:double1pxgreen">a td> </li>
<li><tdstyletdstyle="border:double1pxgreen">a td> </li>
<li> tr> </li>
<li><tr> </li>
<li><tdstyletdstyle="border:double1pxgreen">a td> </li>
<li><tdstyletdstyle="border:double1pxgreen">a td> </li>
<li><tdstyletdstyle="border:double1pxgreen">a td> </li>
<li> tr> </li>
<li><tr> </li>
<li><tdstyletdstyle="border:double1pxgreen">a td> </li>
<li><tdstyletdstyle="border:double1pxgreen">a td> </li>
<li><tdstyletdstyle="border:double1pxgreen">a td> </li>
<li> tr> </li>
<li> table> </li>
<li> body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p>很明显的，IE7的border宽度计算比IE8高，不过由于这是整体偏移，加上我们很少会设定太大的border宽度，影响程度几乎等于0。#p#</p><p><strong>5、bottom、top</strong></p><p>当使用绝对位置时，IE7与IE8会产生些许的偏移，这些偏移是整体性的，所以影响很小<br />例子：<br /></p><pre>
<ol>
<li></li>
<li> </li>
<li>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li>
<li><htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> </li>
<li><head> </li>
<li><title> title> </li>
<li> head> </li>
<li><body> </li>
<li><divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> </li>
<li><divstyledivstyle="background-color:Red;bottom:5px;top:5px;position:absolute;height:40px"> </li>
<li>TEST </li>
<li> div> </li>
<li> div> </li>
<li> body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p>很难看出来吧，因为偏移很小，不过确实是偏移了。</p><p><strong>6、li+float</strong></p><p>UL、LI加上float，在IE7于IE8有相当大的差异，见：<br /></p><pre>
<ol>
<li></li>
<li> </li>
<li>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li>
<li><htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> </li>
<li><head> </li>
<li><title> title> </li>
<li> head> </li>
<li><body> </li>
<li><div> </li>
<li><div> </li>
<li><ul> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST1 li> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST2 li> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST3 li> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST4 li> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST5 li> </li>
<li> ul> </li>
<li> div> </li>
<li> div> </li>
<li> body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p>在IE7上，LI的项目符号被取消了，而在IE8上则正常显示，但却因为是float，所以后面的项目符号盖到前一项目了。修改为程式8的模样后<br />，两者就趋近相同了。</p><pre>
<ol>
<li></li>
<li> </li>
<li>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li>
<li><htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> </li>
<li><head> </li>
<li><title> title> </li>
<li> head> </li>
<li><body> </li>
<li><div> </li>
<li><div> </li>
<li><ulstyleulstyle="list-style-type:none"> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST1 li> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST2 li> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST3 li> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST4 li> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST5 li> </li>
<li> ul> </li>
<li> div> </li>
<li> div> </li>
<li> body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p>在尝试寻找CSS相异点时，许多网站都有这类问题，因为我们常用这种手法来处理页签类的显示。<br />PS:list-style-type在IE7时，只要li是float，就会被完全忽略。#p#</p><p><strong>7、div+heightwithulandimage</strong></p><p>当DIV设定了固定大小，而内容超出所定大小，然后后方跟着IMG时，在IE7及IE8会有相当大的差异。<br /></p><pre>
<ol>
<li></li>
<li> </li>
<li>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li>
<li><htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> </li>
<li><head> </li>
<li><title> title> </li>
<li> head> </li>
<li><body> </li>
<li><div> </li>
<li><divstyledivstyle="width:300px;height:22px;margin-top:5px"> </li>
<li><ulstyleulstyle="list-style-type:none"> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST1 li> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST2 li> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST3 li> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST4 li> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST5 li> </li>
<li><listylelistyle="cursor:hand;float:left;"> </li>
<li>TEST6 li> </li>
<li> ul> </li>
<li> div> </li>
<li><ahrefahref="http://www.hinet.net>"> </li>
<li><imgsrcimgsrc="21565.jpg"width="300px"height="200px"/> </li>
<li> a> </li>
<li> div> </li>
<li> body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p>很明显的，IE7会尊重DIV所制定的大小来安排后面的IMG位置，所以在图14上看不出有何问题，但是在IE8里，当内容超出制定大小时，<br />IMG位置会顺移开，所以就造成了此问题。在实务上，这算是相当常见的相容性错误。<br />解决方法很简单，将要被盖住的那个LI移掉就好了，这本来就是错误的设计。</p><p><strong>8、p的子控件对齐</strong></p><p>有些网页设计师习惯使用P加上子控件来描绘单行输入+按纽的样式，这些网页在IE8上会有或许的差异，如果里面使用的IMG太多，<br />差异就会大到很难忽视。<br /></p><pre>
<ol>
<li></li>
<li> </li>
<li>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li>
<li><htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> </li>
<li><head> </li>
<li><title> title> </li>
<li> head> </li>
<li><body> </li>
<li><p> </li>
<li><inputtypeinputtype="text"/> </li>
<li><imgsrcimgsrc="add2.png"height="16px"width="16px"/> </li>
<li> p> </li>
<li> body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p>很明显，IE7会对IMG置中于P，但IE8不会。这类问题很难解决，需要透过CSS判断IE版本来提供不同的CSS，让两者趋近相同。<br /></p><pre>
<ol>
<li></li>
<li> </li>
<li>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li>
<li><htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> </li>
<li><head> </li>
<li><title> title> </li>
<li> 浅析<em>CSS</em>在<em>IE</em>6、<em>IE7</em>、<em>IE8</em>中<em>的</em>兼容<em>差异</em> 本文向大家介绍一下CSS在IE6、IE7、IE8中的兼容差异解析，关于浏览器的最离奇的统计结果之一就是InternetExplorer版本IE6，IE7和IE8共存。 <p>2010-08-18 10:37:16</p> IE6 IE7 IE8</li>
</ol></pre> <br>
新闻标题：IE7和IE8的CSS样式八大差异 <br>
网站网址：<a href="http://www.whjierui.cn/article/djhepss.html">http://www.whjierui.cn/article/djhepss.html</a>
</div>
</div>
<div class="other">
<h3>其他资讯</h3>
<ul>
<li>
<a href="/article/cdiepop.html">开启Linux桌面时代，快乐行走在开源路上（linux桌面版）</a>
</li><li>
<a href="/article/cdiepji.html">实例迁移后一直在克隆PolarDB在哪可以看到进度？</a>
</li><li>
<a href="/article/cdiepjo.html">浅谈如何用MyEclipse连接MySQL</a>
</li><li>
<a href="/article/cdiepid.html">怎么测试手机?（怎么测试手机网速)</a>
</li><li>
<a href="/article/cdiepds.html">基于Redis的本地存储解决方案（redis本地存储）</a>
</li> </ul>
</div>
</div>
<footer>
<div class="foot-top">
<ul>
<li>
<div class="title">关于美图云海</div>
<div class="tbox">
<div class="txt">
美图云海专注于网站建设、小程序开发，
<br /> 用心做好每一个网站，懂您所需、做您所想！
<br /> 我们比其他网络公司做的更好、做的更多，
<br /> 为客户创造更大的价值，让客户更省心!
</div>
<a rel="nofollow" href="javascript:;" class="more">MORE</a>
</div>
</li>
<li>
<div class="title">相关专题</div>
<div class="tbox">
<a href="javascript:;" class="link">企业官网定制</a>
<a href="javascript:;" class="link">小程序开发</a>
<a href="javascript:;" class="link">品牌网站设计</a>
<a href="javascript:;" class="link">网站建设标签</a>
<a href="javascript:;" class="link">乐山网站建设</a>
<a href="javascript:;" class="link">高端网站设计</a>
<a href="javascript:;" class="link">公司做网站</a>
</div>
</li>
<li>
<div class="title">凭什么选择我们</div>
<div class="tbox">
<a class="link">专业设计团队</a>
<a class="link">快速响应服务</a>
<a class="link">7个软件著作权</a>
<a class="link">已服务3000+客户</a>
<a class="link">项目检测具体全面</a>
<a class="link">技术研发能力强劲</a>
<a class="link">深度符合SEO优化</a>
<a class="link">15项设计奖项</a>
<a class="link">完善的制作流程</a>
<a class="link">售后服务让您省心</a>
</div>
</li>
<li>
<div class="title">网站设计案例</div>
<div class="tbox">
<ul>
<li>
<a href="javascript:;" target="_blank">
<div class="img"><img src="/Public/Home/images/gebaili.jpg" alt="哥百利" />
</div>
<div class="tboxs">
<div class="t1">哥百利</div>
<div class="t2">家具研发、设计、生产、服务为一体的专业实木家具订做企业</div>
</div>
</a>
</li>
<li>
<a href="javascript:;" target="_blank">
<div class="img"><img src="/Public/Home/images/cdshujin.jpg" alt="蜀锦在线" /></div>
<div class="tboxs">
<div class="t1">蜀锦在线</div>
<div class="t2">汽车行业网站建设</div>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="foot-center">
<ul>
<li>
<div class="f-ewm"><img alt="美图云海微信公众号" src="/Public/Home/images/ewm.jpg" /></div>
<div class="tbox ewm">
<div class="t1">扫一扫关注</div>
<div class="t2">专业团队为您解答</div>
</div>
</li>
<li>
<div class="tbox tel">
<div class="t1">电话/邮箱</div>
<div class="t2">400-028-6601 / 028-86922220<br>631063699@qq.com</div>
</div>
</li>
<li>
<div class="tbox sz">
<div class="t1">成都（总部）</div>
<div class="t2">成华区 双林路22号仁禾商务楼5F<br> 大客户专线：13518219792
</div>
</div>
</li>
<li>
<div class="tbox gz">
<div class="t1">网站建设（乐山站）</div>
<div class="t2">
乐山市市中区瑞祥路一段1507号
<br /> 028-86922220
</div>
</div>
</li>
</ul>
</div>
<div class="foot-button">
<div class="link-box" style="width:100%;float:none;">
<div class="a-box"></div>
<div style="border-top:1px solid #ebebeb;font-size:12px;color:#666666;line-height:2;padding-top:20px;margin-top:20px;">
业务范围包括企业网站建设、商城系统开发、品牌网站设计、旅游网站制作、英文外贸网站、教育培训门户网站开发、微信手机移动端开发、响应式网站建设、微信小程序开发、APP定制和其他类型网站定制等。
<br>服务区域包括成都市锦江区、青羊区、武侯区、金牛区、成华区、龙泉驿、温江、新都、高新区、成都市以及全国各地接受异地服务商的公司企业或者机构。
<br>
<div class="a-box"><span><b>友情链接</b></span>
<a href="http://chengdu.cdcxhl.cn/weihu/
" title="成都网站维护" target="_blank">成都网站维护</a><a href="http://www.cxjianzhan.cn/fwxm/pinpai.html" title="成都品牌网站设计" target="_blank">成都品牌网站设计</a><a href="http://www.cqcxhl.com/" title="重庆网站建设" target="_blank">重庆网站建设</a><a href="https://www.cdxwcx.com/tuiguang/zhenghe.html" title="网络整合营销" target="_blank">网络整合营销</a><a href="http://www.nzruijie.cn/" title="企业文化设计" target="_blank">企业文化设计</a><a href="http://www.lsfdjzy.com/" title="乐山康明斯发电机" target="_blank">乐山康明斯发电机</a><a href="http://www.mswzjz.com/" title="恒温恒湿空调机组" target="_blank">恒温恒湿空调机组</a><a href="http://www.bjruijie.cn/" title="产品质量认证" target="_blank">产品质量认证</a><a href="http://seo.cdkjz.cn/quanwang/" title="全网整合营销" target="_blank">全网整合营销</a><a href="http://www.cxhljz.cn/app/" title="手机APP开发" target="_blank">手机APP开发</a> </div>
</div>
<div class="copyright">©2025 青羊区美图云海设计工作室（个体工商户）乐山站 蜀ICP备19037934号</div>
</div>
</div>
</footer>
<div class="fixed-contact-wrap show">
<ul class="item-list clearfix">
<li class="phone">
<a rel="nofollow" target="_blank" href="tel:028-86922220"><i
class="icon"></i><strong>028-86922220</strong></a>
</li>
<li class="qq">
<a rel="nofollow" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><i
class="icon"></i><strong> 244261566</strong></a>
</li>
<li class="back-top">
<a href="#" rel="nofollow" class="back-to-top"><i class="icon"></i><strong> 回到顶部</strong></a>
</li>
</ul>
</div>
<script type="text/javascript">
//右侧联系我们悬浮窗
$(".fixed-contact-wrap").hover(function () {
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
})
function show_phone_menu() {
$(".right-side ul").toggle();
}
</script>
</body>
</html>
<script>
$(".con img").each(function(){
var src = $(this).attr("src"); //获取图片地址
var str=new RegExp("http");
var result=str.test(src);
if(result==false){
var url = "https://www.cdcxhl.com"+src; //绝对路径
$(this).attr("src",url);
}
});
window.onload=function(){
document.oncontextmenu=function(){
return false;
}
}
</script>
