网页设计中常见的浏览器BUG

　　首先说明一点：

　　页面错位不等于浏览器BUG，BUG是指设置了正确的CSS，浏览器却不以预期的样式呈现。

　　比如设置了某个元素：margin-left: 10px; 但是在浏览器中，

　　这个 DIV 元素实际呈现的却是：margin-left: 20px;

　　——在这种情况下才有可能是浏览器 BUG。

　　以下是一些常见的浏览器 BUG：

　　1.上下 margin 叠加 bug

　　现在有二个元素： div1 和 div2，div1 的下面有 10px 的外边距，div2 的上面有 10px 的外边距，

　　样式如下：

　　#div1 { width: 100px; height: 100px; background: #eee; margin-bottom:10px; }

　　#div2 { width: 100px; height: 100px; background: #eee; margin-top:10px; }

　　结构如下：

　　<div id=”div1″>div1</div>

　　<div id=”div2″>div2</div>

　　我们原本期望这二个 div 之间距离是 20px，然而效果却是这样：

　　

 

　　也就是说：这二个 div 之间，有 10px 的空间被叠加在一起。

　　假如把 div1 的 margin-bottom 增加到 15px，那么它们之间的距离就成了 15px，

　　仍然有 10px 的空间被叠加起来。

　　*解决方法：给这二个 div 多加二个样式：float: left; clear: left;

　　最终样式：

　　#div1 { width: 100px; height: 100px; background: #eee; margin-bottom: 10px; float: left; clear: left; }

　　#div2 { width: 100px; height: 100px; background: #eee; margin-top: 10px; float: left; clear: left; }

　　最终效果图：

　　

 

　　2. IE6 浮动 margin 双边距 bug

　　设置一个父级元素 box 和一个子级元素 childbox，

　　子级元素设置左浮动，并且还设置左边距 10px ：

　　样式如下：

　　#box { width: 200px; height: 150px; border: 1px solid #ccc; }

　　#childbox { width: 100px; height: 100px; background: red;

　　float: left; margin-left: 10px; }

　　结构如下：

　　<div id=”box”>

　　<div id=”childbox”>childbox</div>

　　</div>

　　这样设置以后，在 Firefox、ie7、ie8 下都正常显示，可是在 ie6 下，显示成这样：

　　

 

　　我们明明只给了左边距为 10px!!——如果把 10px 改成 20px 的话，ie6 下就会变成 40px!!由此可见，在这种情况下，ie6 对 margin-left 的解释就是在原来的值上多加了一倍!!

　　*解决方法：给子级元素 childbox 添加一行样式：display: inline;

　　最终样式：

　　#box { width: 200px; height: 150px; border: 1px solid #ccc; }

　　#childbox { width: 100px; height: 100px; background: red; float: left; margin-left: 10px; display: inline; }

　　最终效果图：

　　

 

　　3. li 下 的 bug

　　当 li 里包含了任何设置浮动的元素以后，此 bug 就会在 ie6、ie7 下出现：

　　样式如下：

　　ul,p { padding: 0; margin: 0; }

　　li { list-style: none; }

　　/* 清除浏览器默认样式 */

　　ul { width: 110px; }

　　li { width: 100px; height: 20px; border: 1px solid #333; }

　　p { width: 100px; height: 20px; float: left; }

　　结构如下：

　　<ul>

　　<li><p>p</p></li>

　　<li><p>p</p></li>

　　</ul>

　　在 ie6、ie7 里莫明奇妙多出来了几个象素：

　　

 

　　注意：我并没有给 li 设置 margin-bottom 的样式。

　　*解决方法：给 li 多添加一行样式：float: left; 并且要保证 li 拥有足够的宽，别让第二行的 li 真的浮动上来!

　　最终样式：

　　ul,p { padding: 0; margin: 0; }

　　li { list-style: none; }

　　/* 清除浏览器默认样式 */

　　ul { width: 110px; }

　　li { width: 100px; height: 20px; border: 1px solid #333; float: left; }

　　p { width: 100px; height: 20px; float: left; }

　　4. ie6 绝对定位下的 1 象素 bug

　　绝对定位真是个好样式，在众多样式之中它最可爱^_^，你希望它跑到哪去，它就跑到哪里，可惜，这样的乖孩子，也禁不住 ie6 的折磨!!

　　我们先把父级元素的宽设置成任何奇数，例如：350px，让子级元素浮动到父级右侧：

　　样式如下：

　　#box { width: 155px; height: 121px; position: relative; background: red; }

　　#childbox { width: 100px; height: 100px; position: absolute; top: 0; right: 0; background: yellow; }

　　结构如下：

　　<div id=”box”>

　　<div id=”childbox”></div>

　　</div>

　　结果，讨厌的 1px 出现了：

　　

 

　　注意看右侧，那虽然细微、但仍然很刺眼的 1px bug!!!

　　如果把位置调到右下角，结果下面和右边都出现了这 1px 的 bug!!

　　

 

　　这个细小的 bug 虽然不起眼，但如果我们用 绝对定位 来处理 圆角效果 的话，那就让人郁闷了～···

　　*解决方法：最好把父级的宽设置成偶数!否则，就只能用 css hack 代码了!

评论总数：0 条 [ 查看全部 ] 网友评论