height:100%在IE里面不起作用的解决办法

在FF,CHROME等一些高级浏览器,左右布局的,父级高度都会自动匹配子级高的那一个,但是在IE6里面则是不一样的解析方式。

如果在IE6里面想height:100%,就必须从某个层级定高,或者自html,body{height:100%;}。

笔者是遇见了这样的问题,希望定位一个箭头,并且该箭头要垂直居中,这就意味着要top:50%;margin-top:-height/2;但是父级高度应该是100%。

这个时候通常有两种做法:

一、加一个空div

<div>
<div style="float:left;height:100%;">pointer</div>
<div></div>
<div style="float:left">
<div style="height:200px;"></div>
</div>
</div>

不行的话请用第二种

二、全部定高

html,body{
height:100%
}
<div style="height:100%">
<div style="float:left;height:100%;">pointer</div>
<div style="float:left">
<div style="height:200px;"></div>
</div>
</div>

IE6,7的table不能跟随着滚动条滚动的解决办法

最近遇见了一个很奇怪的问题,大致如下面结构:

<div style="overflow-y:auto;width:100px;height:100px;">
<table style="width:100%;height:auto;"></table>
</div>

然后吧移动滚动条就发现IE6,7里面的table并不会随着一起动,这个时候table就像定在了那里一样。事实是确实是定在了那里。

不知道触动了IE6,7的哪根神经,它定在了那里,这个时候就把它当做absolute处理,将父级div加上一个position:relative就可以动了。