IE 5.x/Win 和模型bug

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› HTML›HTML/CSS编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>IEbug</title> <style type="text/css">  </style> </head> <body> <div id="bug1" class="clearfix">     <a name="bug1"></a>     <div class="bugTitle">IE 5.x/Win 和模型bug</div>       <div id="boxbug" title="box bug for IE5.x">这里是一个width:500px;margin:10px;padding:10px; border:10px;的一个盒子.使用widht(空格)/**/:530px，解决IE5.x系列的盒解析bug，因为IE5.x系列浏览器能读到这句.在IE5.x Win，IE6.0 Win下效果一致.<b>如何使用hack解决IE5.x盒解析bug?</b>     <code>#content {  width:530px; //这个是错误的width，所有浏览器都读到了 voice-family: &quot;\&quot;}\&quot;&quot;;   //IE5.X/win忽略了<span class="alt">&quot;\&quot;}\&quot;&quot;</span>后的内容 voice-family:inherit; width:500px;   //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的 }  html&gt;body #content {   //<span class="alt">html&gt;body</span>是CSS2的写法 width:500px; //支持CSS2该写法的浏览器有幸读到了这一句,IE 5.x不支持的。 } </code> <code>#content {  width:500px !important;   //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值 width(空格)/**/:530px;   //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用 }  html&gt;body #content { //<span class="alt">html&gt;body</span>是CSS2的写法 width:500px;   //支持CSS2该写法的浏览器有幸读到了这一句 } </code> <code>&lt;!--[if Lte IE6]&gt;  #content {  width:530px } &lt;[!endif]--&gt; </code>     </div>     <div id="boxbugie6">这里是一个width:500px;margin:10px;padding:10px; border:10px;的一个盒子，IE5.x Win解析不正常。IE6盒模型在向后兼容的同时也包容了以前的错误，IE6其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型(<acronym>DOCTYPE</acronym>)声明，IE6才能够接受正确的box-model所以，hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作。</div> </div> <div id="bug2" class="clearfix">     <a name="bud2"></a>     <div class="bugTitle">IE/div浮动文本出现3px间距的bug</div>     <div class="wrap clearfix">         <div id="ie3px">           <p>这里是浮动box</p>           <p>&nbsp;</p>           <p>&nbsp;</p>         </div>         <p class="ie3px">左边对象是浮动的，这里是采用margin-left来定位，这里的文本会离左边有3px的空白误差。</p>   </div>     <div class="wrap clearfix">         <div id="ieno3px">这里是浮动box,使用了<span class="alt">* html #floatbox2 {margin-right: -3px;}</span>解决3px bug</div>         <p class="no3px">左边对象是浮动的，这里是采用<span class="alt">* html p.no3px{height:1%;margin-left: 0;}</span>，这里的文本会离左边没有了3px的空白误差。</p>       </div>   <div class="wrap">         <p><strong>IE/div浮动文本出现3px间距的bug产生的条件:</strong>             当左边对象是浮动的，右边对象采用外补丁的左边距(margin-left:?px;)来定位，则右边对象内的文本会离左边有3px的空白误差。         </p>         <strong>CSS:</strong>         <code>#ie3px{float: left; width: 100px; height: 50px; background: #f60;}/*左边对象浮动*/     p.ie3px{margin: 0 0 0 100px; background: #333; text-align:left; color:#fff;}/*右边margin-left:??px;*/             </code>         <strong>XHTML:</strong>         <code>&lt;div id=&quot;ie3px&quot;&gt;这里是浮动box&lt;/div&gt; &lt;p class=&quot;ie3px&quot;&gt;左边对象是浮动的，这里是采用margin-left来定位，这里的文本会离左边有3px的空白误差。&lt;/p&gt;         </code>     <p><strong>IE/div浮动文本出现3px间距的bug解决方法:</strong>       利用hack <span class="alt">*html div{}</span>为IE单独写一个样式</p>         <code>* html #ieno3px{margin-right:-3px;}     * html p.no3px{height:1%;margin-left: 0;}</code>         <strong>CSS:</strong>         <code>#ieno3px{float: left; width: 100px; height: 50px; background: #f60;}         p.no3px{margin: 0 0 0 100px; background: #333; text-align:left; color:#fff;}         * html #ieno3px{margin-right:-3px;}         * html p.no3px{height:1%;margin-left: 0;}</code>         <strong>XHTML:</strong>         <code>&lt;div id=&quot;ieno3px&quot;&gt;这里是浮动box,使用了&lt;span class=&quot;alt&quot;&gt;* html #floatbox2 {margin-right: -3px;}&lt;/span&gt;解决3px bug&lt;/div&gt; &lt;p class=&quot;no3px&quot;&gt;左边对象是浮动的，这里是采用&lt;span class=&quot;alt&quot;&gt;* html p.no3px{height:1%;margin-left: 0;}&lt;/span&gt;，这里的文本会离左边没有了3px的空白误差。&lt;/p&gt;</code>   </div> </div> <div id="bug3">     <a name="bug3"></a>     <div class="bugTitle">IE/浮动对象外补丁的双倍距离</div>     <div class="wrap clearfix">         <div id="box1">这个元素，浮动左对齐（float:left）,左侧外补丁(margin-left:50px;),在wrap层内，但在IE浏览器中Box1离左边的距离会是100px,而实际距离应是50px。当一个元素用于非float:none;的浮动状态时，IE下该元素既被视为块级元素，display:block;         </div>         <div class="clear">             CSS:                 <code>#box1{ margin-left:50px; float:left; background:#f60; width:200px;}</code>             XHTML:                 <code>&lt;div class=&quot;wrap&quot;&gt; &lt;div id=&quot;box1&quot;&gt;这个元素，浮动左对齐（float:left）,左侧外补丁(margin-left:50px;),在wrap层内，但在IE浏览器中Box1离左边的距离会是100px,而实际距离应是50px。当一个元素用于非float:none;的浮动状态时，IE下该元素既被视为块级元素，display:block; &lt;/div&gt;       &lt;/div&gt;</code>        </div>     </div>     <div class="wrap clearfix">         <div id="box2">这是个拥有正确margin-left的元素，解决的办法就是，使浮动效果消失,这里采用了display:inline;原理可参阅<a href="http://old9.blogsome.com/2006/04/11/onhavinglayout/">on having layout</a>。</div>         <div class="clear">             CSS:                 <code>#box2{ margin-left:50px; float:left; background:#f60; width:200px; display:inline ;}                </code>             XHTML:                 <code>&lt;div class=&quot;wrap&quot;&gt; &lt;div id=&quot;box2&quot;&gt;这是个拥有正确margin-left的元素，解决的办法就是，使浮动效果消失,这里采用了display:inline;原理可参阅<a href="http://old9.blogsome.com/2006/04/11/onhavinglayout/">on having layout</a>。&lt;/div&gt;       &lt;/div&gt;</code>                 </div>     </div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]