overflow:auto在ie6/7上的诡异??

     今天在小欧老师那看到一篇文章《overflow:auto;在IE6/7下诡异事件》,自己跟着去验证到底是不是这么回事?结果发现虽然是有这样的诡异,但令我百般不解的是,老师为何要在.list上既然用了float:left;为何还要用position:relative;呢??而且解决诡异之事竟然是在.prd_box上再次用到position:relative??好吧,我们先看看老师是怎么做的:

html代码:

css代码(li的背景图就省略了):

.prd_box{
		width: 600px;
		height:300px;
		border:1px solid red;
		background-color: gray;
		overflow: auto;
	}
	.prd_box,.prd_list{
		padding: 15px 0 0;
	}
	.list{
		width:166px;
		height: 168px;
		float: left;
		display: inline;
		margin:0 0 0 -1px;
		border:0;
		position: relative;
	}
	.clearfix{
		clear: both;
	}
在现代浏览器上及IE8或以上的显示正常的效果截图:

overflow:auto在ie6/7上的诡异??_第1张图片

在IE6/7下的显示效果截图如下:

overflow:auto在ie6/7上的诡异??_第2张图片

从效果对比上可以看出IE上显示不正常,但这也不能说是ie的bug,后来老师在.prd_box上加上position:relative后效果与现代浏览器上的一样,解决了这个诡异,但我还是想不明白,如果有那个面们知道,请告知我一声。

后来我想想,还是搞不明白为什么要在.list上用position:relative;呢?我尝试着把它去掉(当然.prd_box上也不加position:relative;),神奇的事就发生了,无论在现代浏览器上还是各大IE上都显示正常??无解ing~~~~






你可能感兴趣的:(css)