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就可以动了。

select层级过高的解决办法

select是一个让人很头疼的东西,尤其是一个页面中需要悬浮一个弹窗的时候,你就会发现任怎么去设置z-index,它总是那么抢在最前面。

如何处理这个“二货”?

通常只有iframe可以降服它:

例子:

<div class="fixed-box" style="z-index:100"></div>
<iframe class="fixed-box" style="z-index:99"></div>

这样定位在页面的同一个位置,

但是总是觉得iframe是个累赘,如果页面条件允许的话,可以通过js控制select隐藏。