IE双倍浮动边界Bug
浏览:2188次 出处信息
看《CSS实战精粹》已经看到hack了,之所以最近没有把文章抄上来,一是懒,二就是比较困惑。
对CSS我属于白痴一样,所以看书中介绍的例子,解决了某某样式BUG,对此我一头雾水,所以我决定将书中提到的一些Bug给弄出来看一下到底是如何让人头疼的一个问题。
第一篇,大家一起来看一下“IE双倍浮动边界Bug”,高手请飘过~~
Bug 描述
大家通过上面提供的链接很方便知道现象的描述。不过在英文原版里Bug的图示并不说明问题(图中并未显示出IE6margin双边距)。
那么让我们自己动手来看一下吧。
以下是代码片段: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>IE Double Margin Bug</title> <style> #wrapper{ width:400px; height:160px; border:1px solid red; background:blue; } #bugdiv{ width:150px; float:left; margin:5px 0 5px 100px; height:150px; background:green; } </style> </head> <body> <div id="wrapper"> <div id="bugdiv"> I’m in bugdiv </div> </div> </body> </html> |
IE6下面的效果如图:

效果图大家已经看到了,200px,很神奇。解决方法很简单,在有浮动的元素上加上display:inline;搞定
以下是代码片段: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>IE Double Margin Bug</title> <style> #wrapper{ width:400px; height:160px; border:1px solid red; background:blue; } #bugdiv{ width:150px; float:left; margin:5px 0 5px 100px; height:150px; background:green; display:inline; } </style> </head> <body> <div id="wrapper"> <div id="bugdiv"> I’m in bugdiv </div> </div> </body> </html> |

ie6_double_margin_fixed
建议继续学习:
- 程序员眼里IE浏览器是什么样的 (阅读:7078)
- 浮动引起的文本重影 (阅读:4121)
- IE BUG相关文章集合 (阅读:3749)
- 用 javascript 判断 IE 版本号 (阅读:3786)
- OverFlow -- 创建BFC,清除浮动 (阅读:3054)
- CSS实现HTML元素透明的那些事 (阅读:2895)
- 一个IE6下重复加载的BUG (阅读:2996)
- IE8开发人员工具如何嵌入浏览器 (阅读:2707)
- IE下json格式的一小点需要注意的地方 (阅读:2554)
- IE6浮动引起的一些BUG (阅读:2265)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:闲谈CSS3动画
后一篇:CSS实现HTML元素透明的那些事 >>
文章信息
- 作者:simaopig 来源: 小小子,simaopig
- 标签: IE 浮动
- 发布时间:2010-05-27 13:26:08
建议继续学习
近3天十大热文
-
[84] memory prefetch浅析
-
[53] 基本排序算法的PHP实现
-
[51] 深入浅出cassandra 4 数据一致性问
-
[49] 转载:cassandra读写性能原理分析
-
[42] MySQL半同步存在的问题
-
[41] javascript插入样式
-
[41] 字符引用和空白字符
-
[40] Inline Form Labels
-
[39] JS中如何判断字符串类型的数字
-
[38] 获取Dom元素的X/Y坐标