IE6和Opera position:absolute; 子元素浮动 width:100%;显示不正确问题。。。

目的是做一个下拉选择框

要求 整个控件占父元素就是上面颜色深的地方大小,点击父元素下拉框下面的a,b,c显示出来可以选择即可,但是不能占用文档空间

在IE6中

<div style="200px;">

<div style=" position:absolute;100%; ">

dsadsd 

</div> 

</div> 

 显示的时候并不会有什么问题

但是在Opera中,发现 

子元素的width:并不是父元素的100;而是变成了窗口width的100%,

那么问题来了,我怎么调?当然主要原因也是我开发经验少的缘故,

 弄来弄去浪费了不少时间。 //验证发现 Opera中子元素Position:relative;也是可以浮动的,只要加z-index就行

再次看了一下  position的所有值,

映像中inherit这个值一直都以为没什么大用处所以一直都没怎么用。

后来在 调整width过程中发现除了auto居然也有inherit属性,抱着试一试的心态,一试果然,

原理子元素在打上  position:absolute;之后设置 inherit;也是可以让子元素和父元素一样宽的,以前一直觉得100%;比较有用,

看来以后要多多使用  inherit ; 了...

原文地址:https://www.cnblogs.com/SHGF/p/2358178.html