【IE大叔开玩笑】之——CSS设置IE6中容器高度的BUG
2013-03-05 14:54
417 查看
在IE6中设置display:block的空容器一个较小高度时,如<p style="height:1px;"></p>,会发现其高度不能小于某个值
demo1:设置font-size:0,但是这个容器的高度最小为2px,所以没有办法实现高度为1px的效果
demo2 & demo3:在容器中增加内容或其他空标签,如 、<br />,并设置line-height:0,虽然可实现效果,
但该容器会存在一个和其父容器字体大小有关的外边距
demo4 & demo5:虽然可以解决外边距的问题,但是在font-family:fixedsys(window的古老字体)等字体下还是会产生问题。
demo6:目前看到的最好的解决方案
推荐:详细了解IE大叔的各种奇葩毛病
<p style="background: #f00; height: 1px; font-size:0"></p><!-- demo1 -->
demo1:设置font-size:0,但是这个容器的高度最小为2px,所以没有办法实现高度为1px的效果
<p style="background: #f00; height: 1px; line-height:0;"> </p> <!-- demo2 --> <p style="background: #f00; height: 1px; line-height:0;"><br/></p> <!-- demo3 -->
demo2 & demo3:在容器中增加内容或其他空标签,如 、<br />,并设置line-height:0,虽然可实现效果,
但该容器会存在一个和其父容器字体大小有关的外边距
<p style="background: #f00; height: 1px; font-size:0;line-height:0"> </p><!-- demo4 --> <p style="background: #f00; height: 1px; font-size:0;line-height:0"><br/></p><!-- demo5 -->
demo4 & demo5:虽然可以解决外边距的问题,但是在font-family:fixedsys(window的古老字体)等字体下还是会产生问题。
<p style="background: #f00; height: 1px; overflow:hidden;"></p><!-- demo6 -->
demo6:目前看到的最好的解决方案
推荐:详细了解IE大叔的各种奇葩毛病
相关文章推荐
- 【IE大叔开玩笑】之——CSS设置IE6中容器高度的BUG
- IE6下css设置容器高度的BUG不能小于某个值
- 转载 CSS设置IE6中容器高度BUG
- 转载 CSS设置IE6中容器高度BUG
- 标准模式中的 IE width 100% bug CSS设置height:"100%" CSS处理圆角
- ie和firefox中通用的设置div最小高度和达到这一最小高度后自适应的css代码
- ie和firefox中通用的设置div最小高度和达到这一最小高度后自适应的css代码
- IE中伪类:hover的使用及BUG,以及如何在IE6中进行修正(CSS)
- IE的CSS Bug列表(IE6,IE7和IE8)
- css设置select高度(IE,FF,Chrome)[转]
- css在firefox及IE6中最小高度如何设置
- 未设置高度的容器背景和边框不显示问题(CSS)
- [转]CSS中设置div最小高度(支持IE6, IE7, IE8, FF等浏览器)
- 关于div设置最小高度,超过后自动增加的css,兼容IE和火狐
- IE6,IE7下设置body{overflow:hidden;}失效Bug
- div+css总结—FF、IE7下div不设置高度背景颜色或外边框不能显示的解决方法
- DIV+CSS处理DIV设置float后,父容器无法定位高度的问题解决
- 在IE6下用css设置div的高度为100%时失效的问题!
- CSS+DIV排版时容器内对象全部设置了float属性后容器不能自动适应高度的解决方案
- ie和firefox中通用的设置div最小高度和达到这一最小高度后自适应的css代码