浏览器兼容之旅第三站:IE常见Bug总结及修复方法—part1

2020-04-28 08:12:48易采站长站整理

HTML Markup

复制代码
<div id=”container” >
<div id=”left” >http://net.tutsplus.com/</div>
<div id=”right” ></div>
</div>

CSS Code 

复制代码
#container{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: auto;
}
#left,
#right{
background: #95CFEF;
border: solid 1px #36F;
width: 100px;
height: 150px;
margin: 30px;
padding: 10px;
float: left;
}

效果图
 
解决这样的bug没有什么好方法,只能在元素中加上overflow:hidden,将多出来的内容直接切掉,如:

复制代码
#left { overflow: hidden; }

虽然可以使用 overflow:hidden;或 overflow:scroll;来 修正,但 hidden 容易导致其他一些问 题,scroll 会 破坏设计。最好是使用固定布局或者是使用好宽度

十、IE6下躲猫猫
这个奇怪的 Bug 是 IE6 及其以下版本的,为什么起这样的一个名称,因为在某些情况下文本看起 来消失了,重新刷新隐藏的部分才会再度出现。出现这个 Bug 的条件是:一个撑破了容器浮动元素后 面紧跟着一些非浮动元素,并且非浮动元素中有一些定义了:hover 的链接,那么在 IE6 及其以下版中, 当链接在悬浮状态下就会触发这个奇怪而又无耐的Bug。

解决这个Bug最好的方法就是清除浮动,因为他是由于浮动才产生的Bug。有关于清除浮动的方法,大家可以参考《Clear Float 》。
上面主要搜集了10种Bug,可以说这几种都是经典的Bug。希望这几种能给你今后的工作带来方便,让你在Bug还没出现之前就避免他的发生。那么第三站我们也要说ByeBye了,如果你天天需要面对这个讨厌的IE,小生建议你静下心来细细读完。对你会有所帮助的。如果你有更好的建议,也记得告诉我。或者在评论中给我留言。:)
更新一:
在上面的基础上追加一个典型的IE6 bug: IE6中绝对定位、浮动元素混用时的BUG。一个内容区块,其中包含两个浮动的box,外加一个绝对定位的box,设置如下样式时会发生IE6浮动元素消失的BUG。
HTML Code 

复制代码
<div class=”content” >
<div class=”abs” >abs</div>
<div class=”main” >main</div>
<div class=”sub” >sub/div>
</div>

CSS Code

复制代码
*{ padding:0; margin:0;}
.content{width:600px;}
.abs{position:absolute; left:0; top:0; width:600px; height:120px; background:#1f3a87; }