今天需要做个tab选项卡,如下图所示的效果:
做法很简单,就是给tab切换的按钮父级元素加上margin-bottom:-1px就可以实现
但是在IE7下出现了如下图所示的效果,原因是由于IE7中设置margin负值无效。
百度+谷歌了一番才了解到,IE6/IE7的动态定位(position:absolute | fixed | relative)默认z-index值是0,而标准浏览器则是auto,导致margin-bottom:-1px时,边框被下面的tab内容元素挡住了,所以看不到想要的效果。
解决办法:
在设置margin负值的元素加上 position:relative;属性即可解决.