解决方案1 ( 推荐):我们只要给这个table一个border-collapse:collapse的样式,就可以达到这个效果了。
具体如下:
1、HTML结构:
<table width=”300″ border=”1″ cellpadding=”0″cellspacing=”0″ bordercolor=”#C0C0C0″
style=”border-collapse:collapse;”>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
18:IE6 下z-index无效
在CSS中,通过z-index这个属性改变层级,要让z-index起作用有个前提,就是元素的position属性要 是relative,absolute或是fixed。z-index层级越高,内容越应该在上面显示。在大部分的浏览器在大部分的情况下,确实如此,但是不绝对,尤其遇到IE6。
以下所有结果截图的大背景如下:
1、页面上固定不动的,一成不变的,送豪宅也不会从良的是一个黑色背景,透明度 40%,几乎满屏显示的层级为1的绝对定位层。HTML为:
<div></div>
对应CSS为:
#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
作用是为了让层级关系一目了然。看:
这说明内容在z-index为1的绝对定位层之下。
这说明内容在z-index为1的绝对定位层之上。
2、页面上做对比的是美女图片,图片在半透明黑色绝对定位层的上面还是下面很容易辨别,这样,您就能够对我所说的z- index不起作用有很直观的认识了。
2、IE6的抱怨:浮动让我沉沦
现在开始真正的讲述 问题的产生,原因以及解决了。首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个:1、父标签 position属性为relative;2、问题标签无position属性(不包括static);3、问题标签含有浮动(float)属性。
您 可以拿下面的代码自己做个简单测试:
<div></div>
<div style=”position:relative; z-index:9999;”>
<img style=”float:left;” src=”http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg” />
</div>
丫的,这z-index都9999了,层级够高吧,但是,看下面的图:
这一对比就知道问题了,可能有人会疑问,这会不会是IE6的relative自己感冒了,而不是浮动(float)携带 了“甲流病毒”。好,我现在去掉浮动,HTML代码如下:
<div></div>
<div style=”position:relative; z-index:9999;”>










