IE双倍浮动边界Bug
浏览:2098次 出处信息
看《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> |
建议继续学习:
- 程序员眼里IE浏览器是什么样的 (阅读:6603)
- 浮动引起的文本重影 (阅读:3957)
- IE BUG相关文章集合 (阅读:3665)
- 用 javascript 判断 IE 版本号 (阅读:3150)
- OverFlow -- 创建BFC,清除浮动 (阅读:2928)
- CSS实现HTML元素透明的那些事 (阅读:2821)
- 一个IE6下重复加载的BUG (阅读:2732)
- IE8开发人员工具如何嵌入浏览器 (阅读:2594)
- IE下json格式的一小点需要注意的地方 (阅读:2480)
- IE6浮动引起的一些BUG (阅读:2177)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:闲谈CSS3动画
后一篇:CSS实现HTML元素透明的那些事 >>
文章信息
- 作者:simaopig 来源: 小小子,simaopig
- 标签: IE 浮动
- 发布时间:2010-05-27 13:26:08
建议继续学习
近3天十大热文
- [132] Go Reflect 性能
- [17] 公钥私钥加密解密数字证书数字签名详解
- [17] 基于HTTP缓存轻松实现客户端应用的离线支持
- [16] osx平台上lol英雄联盟launcher启
- [14] 我的git笔记
- [13] Joomla反序列化漏洞的查漏补缺
- [13] 在JavaScript中什么时候使用==是正
- [12] Linux内存中的Cache真的能被回收么?
- [12] SSL多域名绑定证书的解决方案
- [11] 正态分布的前世今生(一)