IE 5.x/Win 和模型bug

web前端|css教程 IE 5.x/Win 和模型bug

IE,5.x/Win,和模型bug

web前端-css教程

整形网站源码下载,vscode配置备份,ubuntu关闭无线,tomcat 详解 pdf,搭建sqlite数据库吗,哪种爬虫加热包好用一些,PHP主机空间背景图,运城seo推广价格优惠,迅雷网站源码,wordpress app页面模板lzw

<br /><title>IEbug</title> <div class="khw">论坛网页源码,如何播放vscode的视频,谷歌翻译ubuntu,tomcat配置没有网址,爬虫阻塞队列,php 发送邮件教程,江北区seo外贸推广,AI智能付网站源码,dz模板 简洁lzw</div> body .wrap{ width:500px;} .wrap *{text-align:left;} /* clear float*/ .clearfix:after {  content: “.”;   display: block;   height: 0;   clear: both;   visibility: hidden; } .clearfix {display: inline-table;} /* Hides from IE-mac \*/ .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ .clear{ clear:both;} /*bug1*/ #bug1{} .bugTitle{ position:absolute; left:0px; top:0px; width:100px; font:18px “Courier New”, Courier, monospace; font-weight:bold;padding:5px; background:#f5f5f5;} #boxbug{ width:500px;width /**/:530px; border:10px #f60 solid; margin:10px auto; padding:10px;} #boxbugie6{ width:500px; border:10px #f60 solid; margin:10px auto; padding:10px;} html>body #boxbugie6{ width:500px;} html>body #boxbug{ width:500px;} /*bug2*/ #bug2{} #ie3px,#ieno3px{float: left; width: 100px; height: auto; min-height:50px; background: #f60;} p.ie3px,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;} /*bug3*/ #bug3{} #box1,#box2{ margin-left:50px; float:left; background:#f60; width:200px;} #box2{ /*float:none;*/display:inline ;} –> <p> <div class="khw">多用户自助建站 源码,ubuntu 终端改颜色,谷歌的爬虫工具,php kaisa,seo经理求职lzw</div> </p><div id="bug1" class="clearfix"><div class="bugTitle">IE 5.x/Win 和模型bug</div><div id="boxbug">这里是一个width:500px;margin:10px;padding:10px; border:10px;的一个盒子.<br />使用widht(空格)/**/:530px，解决IE5.x系列的盒解析bug，因为IE5.x系列浏览器能读到这句.在IE5.x Win，IE6.0 Win下效果一致.<br /><b>如何使用hack解决IE5.x盒解析bug?</b><br />    <code>#content { </p><p>width:530px; //这个是错误的width，所有浏览器都读到了</p><p>voice-family: "\"}\"";   //IE5.X/win忽略了"\"}\""后的内容</p><p>voice-family:inherit;</p><p>width:500px;   //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的</p><p>} </p><p>html>body #content {   //html>body是CSS2的写法</p><p>width:500px; //支持CSS2该写法的浏览器有幸读到了这一句,IE 5.x不支持的。</p><p>} </code><br /><code>#content { </p><p>width:500px !important;   //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值</p><p>width(空格)/**/:530px;   //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用</p><p>} </p><p>html>body #content { //html>body是CSS2的写法</p><p>width:500px;   //支持CSS2该写法的浏览器有幸读到了这一句</p><p>} </code><br /><code>  #content {  width:530px } </p><p></code>    </div><div id="boxbugie6">这里是一个width:500px;margin:10px;padding:10px; border:10px;的一个盒子，IE5.x Win解析不正常。<br />IE6盒模型在向后兼容的同时也包容了以前的错误，IE6其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型(DOCTYPE</acronym>)声明，IE6才能够接受正确的box-model所以，hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作。</div></div><div id="bug2" class="clearfix"><div class="bugTitle">IE/div浮动文本出现3px间距的bug</div><div class="wrap clearfix"><div id="ie3px"><p>这里是浮动box</p></p></pre>左边对象是浮动的，这里是采用margin-left来定位，这里的文本会离左边有3px的空白误差。</p></p></div><div class="wrap clearfix"><div id="ieno3px">这里是浮动box,使用了* html #floatbox2 {margin-right: -3px;}解决3px bug</pre>左边对象是浮动的，这里是采用* html p.no3px{height:1%;margin-left: 0;}，这里的文本会离左边没有了3px的空白误差。</p></p></div><div class="wrap"><p><B>IE/div浮动文本出现3px间距的bug产生的条件:</B></p><p>            当左边对象是浮动的，右边对象采用外补丁的左边距(margin-left:?px;)来定位，则右边对象内的文本会离左边有3px的空白误差。        </p><p>        <B>CSS:</B><br />        <code>#ie3px{float: left; width: 100px; height: 50px; background: #f60;}/*左边对象浮动*/</p><p>    p.ie3px{margin: 0 0 0 100px; background: #333; text-align:left; color:#fff;}/*右边margin-left:??px;*/<br />        </code><br />        <B>XHTML:</B><br />        <code></p><div id="ie3px">这里是浮动box</pre>左边对象是浮动的，这里是采用margin-left来定位，这里的文本会离左边有3px的空白误差。</p><p>        </code> </p><p><B>IE/div浮动文本出现3px间距的bug解决方法:</B></p><p>      利用hack *html div{}为IE单独写一个样式</p><p>        <code>* html #ieno3px{margin-right:-3px;}</p><p>    * html p.no3px{height:1%;margin-left: 0;}</code><br />        <B>CSS:</B><br />        <code>#ieno3px{float: left; width: 100px; height: 50px; background: #f60;}</p><p>        p.no3px{margin: 0 0 0 100px; background: #333; text-align:left; color:#fff;}</p><p>        * html #ieno3px{margin-right:-3px;}</p><p>        * html p.no3px{height:1%;margin-left: 0;}</code><br />        <B>XHTML:</B><br />        <code></p><div id="ieno3px">这里是浮动box,使用了* html #floatbox2 {margin-right: -3px;}解决3px bug</pre>左边对象是浮动的，这里是采用* html p.no3px{height:1%;margin-left: 0;}，这里的文本会离左边没有了3px的空白误差。</p><p></code>  </div></div><div id="bug3"><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:<br /><code>#box1{ margin-left:50px; float:left; background:#f60; width:200px;}</code><br />            XHTML:<br /><code></p><div class="wrap"><div id="box1">这个元素，浮动左对齐（float:left）,左侧外补丁(margin-left:50px;),在wrap层内，但在IE浏览器中Box1离左边的距离会是100px,而实际距离应是50px。当一个元素用于非float:none;的浮动状态时，IE下该元素既被视为块级元素，display:block;</p></div></pre></code>        </div></p></div><div class="wrap clearfix"><div id="box2">这是个拥有正确margin-left的元素，解决的办法就是，使浮动效果消失,这里采用了display:inline;原理可参阅on having layout。</div><div class="clear">            CSS:<br /><code>#box2{ margin-left:50px; float:left; background:#f60; width:200px; display:inline ;}</code><br />            XHTML:<br /><code></p><div class="wrap"><div id="box2">这是个拥有正确margin-left的元素，解决的办法就是，使浮动效果消失,这里采用了display:inline;原理可参阅on having layout。</div></p></pre></code>        </div></p></div></pre><br />

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

和模型bug