"float: right" bug in IE :在IEfloat-right外围容器中文字不见了!
css :
body { margin: 10px 50px; } #contener { border: 1px solid #000; background-color: yellow; } #floatRight { float: right; border: 1px solid red; color: red; width: 30%; } #contenu { border: 1px solid blue; color: blue; } .spacer { clear: both; border: 1px solid #FF00FF; color: #FF00FF; } |
xhtml :
<div id="contener"> <b>#contener</b> <div id="floatRight"> <b>#floatRight</b> : Float block at the right of the block #contenu </div> <div id="contenu"> <b>#contenu</b> : Simple block </div> <div class='spacer'> <b>.spacer</b> : a "spacer" block... </div> </div>
|
正确应该显示为:
Internet Explorer 6 显示为 :
#contener 层的文字和#contenu层不见了! 只有#contener的背景颜色!
解决办法 :
body { margin: 10px 50px; } #contener { position: relative; /* 增加的 */ border: 1px solid #000; background-color: yellow; } #floatRight { position: relative; /* 增加的*/ float: right; border: 1px solid red; color: red; width: 30%; }
|
[xhtml/css]float:right by banket posted at oioj on 2006-6-29 16:49:59 Weather: 晴 |
"float: right" bug 在IE中float-right外围容器的margin-left失效. css : body { margin: 0px; } #contener { border: 1px solid #000; margin: 10px 50px;/*左右外补丁margin=50px*/ } #floatRight { float: right; border: 1px solid red; color: red; width: 30%; } #contenu { border: 1px solid blue; color: blue; } .spacer { clear: both; border: 1px solid #FF00FF; color: #FF00FF; } |
xhtml : <div id="contener"> <b>#contener</b> <div id="floatRight"> <b>#floatRight</b> : Float block at the right of the block #contenu </div> <div id="contenu"> <b>#contenu</b> : Simple block </div> <div class='spacer'> <b>.spacer</b> : a "spacer" block... </div> </div> |
正确显示为: Internet Explorer 6 显示为: IE6.0中#contener的margin-left无效! 解决办法: body { margin: 10px 50px; /* 给body增加marign */ } #contener { border: 1px solid #000; /* margin: 10px 50px; 取消#contener的margin,也就是给他外围增加margin替代自身margin*/ }
|
|
|
[xhtml/css]float:right "float: right" bug 在IE中float-right外围容器的margin-left失效.
css :
body { margin: 0px; } #contener { border: 1px solid #000; margin: 10px 50px;/*左右外补丁margin=50px*/ } #floatRight { float: right; border: 1px solid red; color: red; width: 30%; } #contenu { border: 1px solid blue; color: blue; } .spacer { clear: both; border: 1px solid #FF00FF; color: #FF00FF; } |
xhtml :
<div id="contener"> <b>#contener</b> <div id="floatRight"> <b>#floatRight</b> : Float block at the right of the block #contenu </div> <div id="contenu"> <b>#contenu</b> : Simple block </div> <div class='spacer'> <b>.spacer</b> : a "spacer" block... </div> </div> |
正确显示为:
Internet Explorer 6 显示为:
IE6.0中#contener的margin-left无效!
解决办法:
body { margin: 10px 50px; /* 给body增加marign */ } #contener { border: 1px solid #000; /* margin: 10px 50px; 取消#contener的margin,也就是给他外围增加margin替代自身margin*/ }
|
posted on 2006-07-12 14:03
汪杰 阅读(385)
评论(0) 编辑 收藏 引用 所属分类:
div css dhtml