Internet Explorer前端攻城师的的恶梦,十个有九个前端人员都认为他为祸人间不浅,本应早点灭掉他,可是上天有好生之德,因而没有灭之,在此情况下,前端的攻程师们将就将就过吧 。前面在《浏览器兼容之旅第一站:如何在页面中创建IE条件注释》和《浏览器兼容之旅第二站:各浏览器的Hack写法让浏览器达到一致的渲染效果》中了解了一些处理兼容的基本方法 。那么这节开始浏览器兼容之旅的第三站:IE常见Bug,在本节中,您可以了解IE中常见的Bugs,以及这些Bugs要如何去避免发生,或者发生了,我们将如何去解决他 。大家有兴趣吗?有兴趣的童鞋们就开始我们的旅行吧 。
一、浮动元素的双倍Margin的Bug
浮动元素的双倍Margin的Bug是IE6以及其以下版本的一个经典Bug了,触发这个Bug的产生是给元素设置了float并且同时和float同一方向设置了margin值,此时在IE6(IE6以下版本我们飘过不理了)就会产一个双倍margin值的Bug 。我们先来看一段代码:
复制代码代码如下:
.demo {
background: #95cfef;
border: 1px solid #36f;
float: left;
height: 100px;
margin: 30px 0 0 30px;
width: 300px;
}
效果
文章插图
修复方法
修复这个立王Bug的方法很简单,只需要改变浮动元素的显示风格,也就是说在浮动元素中增加一个display:inline属性,这样就可以轻松的解决浮动元素的双倍Margin的Bug 。下面是修改后的代码:
复制代码代码如下:
.demo {
background: #95cfef;
border: 1px solid #36f;
display: inline;
float: left;
height: 100px;
margin: 30px 0 0 30px;
width: 300px;
}
二、克服Box Model的Bug
Box Model的Bug常发生在同时给一个元素设置了宽度和高度的时候还设置了元素的padding或border值,此时将改变元素的真正大小 。换个形像一点的例子,我们进行行一个960px的布局,里面左边栏是220px的宽度,主内容是720px的宽度,他们之间是20px的间距,此时设计需要在左边栏有一个10px左右内距,如果我们按下面的代码写就会产生一个Bug 。
Html markup
复制代码代码如下:
div id="wrap"
div id="left" left/div
div id="content" main/div
/div
CSS Code
复制代码代码如下:
#wrap {
width: 960px;
background: #66CCFF
}
#left {
background: #FFCC99;
float: left;
padding: 0 10px;
width: 220px;
}
#right {
background: #9933CC;
float: right;
width: 720px;
}
此时div#left将改变了其实际的宽度,我们来看下面的一个图,上图是没有padding值时的div#left,而下图是有padding的div#left:
文章插图
这个Bug在所有浏览器都将存在,因为在div#left中padding值改变了最初的宽度220px,那么要克服这个Bug也不难,只需要在div#left内部增加一个div,并把padding值移入到这个新增加的div中就行了 。
复制代码代码如下:
div id="wrap"
div id="left"
divleft/div
/div
div id="content" main/div
/div
CSS Code
复制代码代码如下:
#wrap {
width: 960px;
background: #66CCFF
}
#left {
background: #FFCC99;
float: left;
width: 220px;
}
#left div {
padding: 0 10px;
}
#right {
background: #9933CC;
float: right;
width: 720px;
}
此例只说加了padding值,如果在div中加了border值,我们同样需要把border值也移入到内部的div中,这样就可以轻松克服Box Model带来的Bug 。当然不增加额外标签也有一种办法可以解决,就是重新计算宽度,但这种方法是治标不治本,小生不提倡使用这种方法 。
推荐阅读
- 浏览器兼容之旅第四站:IE常见Bug总结及修复方法—part2
- 多种方法解决min-width 不兼容ie6的问题
- IE6浏览器下resize事件被执行了多次解决方法
- 搜狗高速浏览器录制下来的视频在哪看
- 2345浏览器怎么打印网页
- 怎么清理浏览器缓存数据
- IE6中的position:fixed定位兼容性写法分享
- 兼容ie6浏览器的php下载文件代码分享
- 兼容IE6的min-width、min-height的简单方法
- 多浏览器下IE6 IE7 firefox li 间距问题第2/2页