IE7和IE8的CSS样式八大差异
咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

网站营销

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

疆括仕网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

IE7和IE8的CSS样式八大差异

你对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上启始的位置就有差异。

 
 
 
      
  
  
  1.   
  
  
  2.  
    3.   
  
  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    4.   
  
  
  4.  
    5.   
  
  
  5.  
    6.   
  
  
  6.  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>
                URL网址：<a href="https://www.tyhkzb.com/article/djhepss.html">https://www.tyhkzb.com/article/djhepss.html</a>
            </div>
        </div>
        <div class="othernews">
            <h3>其他资讯</h3>
            <div class="othernews_list">
                <ul>
                    <li>
                            <a href="/article/dhhojpc.html">服务器显卡在哪里?（服务器显卡在哪里看)</a>
                        </li><li>
                            <a href="/article/dhhojhs.html">香港多IP站群服务器的优势有哪些</a>
                        </li><li>
                            <a href="/article/dhhojch.html">利用Redis精确清理数据库（redis清楚制定数据）</a>
                        </li><li>
                            <a href="/article/dhhojhd.html">Win7系统遇到数据库失败问题？有解决方法！(win7提示数据库失败)</a>
                        </li><li>
                            <a href="/article/dhhopoj.html">Golang中的同步工具Sync.Once详解</a>
                        </li>                </ul>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="footer_content">
        <div class="footer_content_top clear">
            <div class="content_top_share fl">
                <div><img src="/Public/Home/img/logo.png"></div>
                <div class="top_share_content">
                    <dd>分享至：</dd>
                    <dt class="bdsharebuttonbox clear" id="share">
                        <a href="#" class="bds_tsina iconfont fl" data-cmd="tsina" title="分享到新浪微博"></a>
                        <a href="#" class="bds_sqq iconfont fl" data-cmd="sqq" title="分享到QQ好友"></a>
                        <a href="#" class="bds_weixin iconfont fl" data-cmd="weixin" title="分享到微信"></a>
                        <a href="#" class="bds_weixin iconfont fl" data-cmd="tieba" title="分享到贴吧"></a>
                    </dt>
                    <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
                </div>
            </div>
            <div class="content_top_left fl clear">
                <div class="top_left_list fl">
                    <dd><a href="/about/">关于我们</a></dd>
                    <dt>
                        <a href="/about/#gsjj">公司简介</a>
                        <a href="/about/#fzlc">发展历程</a>
                    </dt>
                </div>
                <div class="top_left_list fl">
                    <dd><a href="/service/">服务项目</a></dd>
                    <dt>
                        <a href="/service/">高端网站建设</a>
                        <a href="/miniprogram/">小程序开发</a>
                        <a href="/service/app.html">APP开发</a>
                        <a href="/service/yingxiao.html">网络营销</a>
                    </dt>
                </div>
                <div class="top_left_list fl">
                    <dd><a href="/jianzhan/">建站知识</a></dd>
                    <dt>
                        <a href="/jianzhan/">行业新闻</a>
                        <a href="/jianzhan/">建站学堂</a>
                        <a href="/jianzhan/">常见问题</a>
                    </dt>
                </div>
                <div class="top_left_list fl">
                    <dd><a href="/contact/">联系我们</a></dd>
                    <dt>
                        <a href="/contact/#lxwm">公司地址</a>
                        <a href="/contact/#rczp">人才招聘</a>
                    </dt>
                </div>
            </div>
            <div class="content_top_right addressR fr">
                <div class="top_right_title addressf_title">
                    <a href="javascript:;" class="on">成都</a>
                    <a href="javascript:;">大悟县</a>
                </div>
                <div class="top_right_content addressf">
                    <div class="right_content_li on">
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">电话：028-86922220</dt>
                        </div>
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">地址：成都市太升南路288号锦天国际A幢1002号</dt>
                        </div>
                    </div>
                    <div class="right_content_li">
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">电话：028-86922220</dt>
                        </div>
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">地址：湖省孝感市大悟县城关镇鄂北物流城13栋125号</dt>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer_content_copyright clear">版权所有：大悟县疆括仕商贸有限公司
        <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">鄂ICP备2025139637号-7</a>
    </div>
</div>

<!--浮窗-->
<div class="FloatingWindow clear">
    <a href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="FloatingWindow_list fr">
        <div class="FloatingWindow_list_title">
            <dd class="iconfont"></dd>
            <dt><span>在线</span>咨询</dt>
        </div>
    </a>
    <a href="javascript:;" class="FloatingWindow_list fr">
        <div class="FloatingWindow_list_title">
            <dd class="iconfont"></dd>
            <dt>服务热线</dt>
        </div>
        <div class="FloatingWindow_list_down fadeInRight animated">服务热线：028-86922220</div>
    </a>
    <a href="javascript:;" class="FloatingWindow_list fr STop">
        <div class="FloatingWindow_list_title">
            <dd class="iconfont"></dd>
            <dt>TOP</dt>
        </div>
    </a>
</div>

<script src="/Public/Home/js/jquery-1.8.3.min.js"></script>
<script src="/Public/Home/js/comm.js"></script>
<script src="/Public/Home/js/wow.js"></script>
<script src="/Public/Home/js/common.js"></script>
</body>
</html>
<script>
    $(".cont 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>