网页技巧：IE中奇怪的左右border断线现象

[ 来路：21kn.com    时间：2007-7-7 20:56:47    点击： ]

　　如果容器内有两个浮动，并用CLEAR清除浮动。在ie下拖动滚动条时最外层的border会消失，如果给最外层加上宽度或者高度就不会出现。这是一个奇怪的现象，目前还不能解释是什么原因所导致的。看下面的示例：

<div style="margin:500px 100px 10px 100px;padding:50px;border:1px solid #ccc;line-height:300%"> <div style="float:left"> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> </div> <div style="float:right"> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> </div> <div style="clear:both"></div></div>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

　　我们可以通过下面的办法解决：
　　　1.在父元素中加入height:1%
　　　2.加入一个宽度
　　　3.加入一个背景色
　看下面的例子，我们给父元素加上一个宽度就搞定了：

<div style="width:660px; margin:500px 100px 10px 100px;padding:50px;border:1px solid #ccc;line-height:300%"> <div style="float:left"> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> </div> <div style="float:right"> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> </div> <div style="clear:both"></div></div>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

上一篇：div+css网页布局时如何合理架构css？  下一篇：网页制作问题：CSS hack:区分IE6，IE7，firefox