IE6/IE7之空元素拥有layout就获得了高度bug

àì夳堔傛蜴生んèń 2022-09-18 03:53 11阅读 0赞

## IE6/IE7之空元素拥有layout就获得了高度bug ##

影响版本  
这个bug影响: IE7, IE6

症状  
空元素拥有layout就获得了高度。

描述  
我发想的另一个bug. 这个例子可能很打击那些应用clearing元素（例如<div style="clear:both"></div）来清除浮动的人 . 让我们看一下例子:

例子  
可用的例子在 separate page

HTML Code:  
<div></div>  
CSS Code:  
div \{  
background: blue;  
width: 100%; |\* to give "layout" \*|  
\}  
我们有一个空的块级元素 <div>. 在css中我们通过设置 width 属性使他拥有 "layout" 同时设置 background 为蓝色. 因为元素是空的, 理性的浏览器会让她的高度为0px; IE6 and IE7 显然认为这里有一个魔幻的空间同时渲染成蓝色并赋予他一个与字体大小近似的高度；

解决  
修正版本  
所有版本

描述  
这是一个以火灭火类型的bug.我们将通过明确提醒的方式来修复IE，并确保不会造成到其它问题. 让我们看一下:

修正的例子在 separate page

HTML Code:  
<div></div>  
CSS Code:  
div \{  
height: 0;  
overflow: hidden;  
background: blue;  
width: 100%; |\* this is just what we originaly had as "layout" giver \*|  
\}  
我们的标记和以前一样; 在css中我们增加了 height property 并设置它为0px，这修正了IE7的bug. 由于IE6是高发bug的浏览器，所以我们仍然添加 overflow property 并设置为 hidden IE6中的上述错误

转载自：[http://hi.baidu.com/jinwei\_zhiyuan/item/fa927c3ea1c2ecf72784f4ad][http_hi.baidu.com_jinwei_zhiyuan_item_fa927c3ea1c2ecf72784f4ad]

[http_hi.baidu.com_jinwei_zhiyuan_item_fa927c3ea1c2ecf72784f4ad]: http://hi.baidu.com/jinwei_zhiyuan/item/fa927c3ea1c2ecf72784f4ad

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 IE6 BUG

先来看html代码： <ul> <li><a href=""><img src="images/k.gif" />第六届中国国际教育装备科技创新峰会</a></li>

╰半夏微凉°/ 2024年02月17日 14:06/ 0 赞/ 57 阅读

相关 IE6BUG解决方法

1.双边距BUG float引起的使用display：inline 2.3像素问题使用多个float和注释引起的使用dislpay:inline -3px 3.

拼搏现实的明天。/ 2023年08月17日 17:19/ 0 赞/ 145 阅读

相关 IE6/IE7之空元素拥有layout就获得了高度bug

IE6/IE7之空元素拥有layout就获得了高度bug 影响版本这个bug影响: IE7, IE6 症状空元素拥有layout就获得了高度。描述

àì夳堔傛蜴生んèń/ 2022年09月18日 03:53/ 0 赞/ 12 阅读

相关 IE（IE6/IE7/IE8）支持HTML5标签

让IE（ie6/ie7/ie8）支持HTML5元素，我们需要在HTML头部添加以下 JavaScript，这是一个简单的document.createElement声明，利用条

向右看齐/ 2022年07月16日 11:47/ 0 赞/ 346 阅读

相关 IE（IE6/IE7/IE8）支持HTML5标签

让IE（ie6/ie7/ie8）支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement声明，利用条件

喜欢ヅ旅行/ 2022年04月21日 14:21/ 0 赞/ 433 阅读

相关 IE6_BUG解决方案

摘自 [http://blog.sina.com.cn/s/blog\_6c8612790100wxsy.html][http_blog.sina.com.cn_s_blog_

傷城~/ 2022年01月11日 23:31/ 0 赞/ 278 阅读

相关 ie6 bug详谈

一、双外边距浮动bug .left{ float:left; margin-left:20px; } //wrong 此left在ie6下的左

短命女/ 2022年01月06日 06:19/ 0 赞/ 246 阅读

相关 IE6_BUG解决方案

摘自 [http://blog.sina.com.cn/s/blog\_6c8612790100wxsy.html][http_blog.sina.com.cn_s_blog_

骑猪看日落/ 2021年12月22日 09:09/ 0 赞/ 323 阅读

相关 ie6,ie7,ie8 css bug汇总以及兼容解决方法

1：li边距“无故”增加　　任何事情都是有原因的，li边距也不例外。　　先描述一下具体状况：有些时候li边距会突然增加很多，值也不固定（只在IE6/IE7有这种现象）

Love The Way You Lie/ 2021年12月13日 20:21/ 0 赞/ 387 阅读

相关神奇的IE6、IE7，莫名其妙的bug——单元格的高度会影响文本框的宽度？

很多时候古老浏览器带来的问题往往出乎我们意料，而多数时候我们都能找到一个原因来解释这个bug，但今天在IE6和IE7遇到的bug确实让摸不着头脑，见下图： ![SouthEa

ゞ浴缸里的玫瑰/ 2021年11月02日 17:36/ 0 赞/ 108 阅读