CSS 经验教训 & IE HACKs

1、表格在IE下最外层边框无颜色。

 table td, table th {  border-color: blue; }   

解决办法：对table本身也要设置颜色

table, table td, table th {  border-color: blue; } 

 

2、字体显示不正常。

代码：h5 { font-family: Arial, 微软雅黑;}  

在IE中对中文将使用arial（找不到，所以用宋体），其他浏览器中文使用“微软雅黑”，英文使用arail

解决办法：h5 { font-family: 微软雅黑;}  

 

3、空单元格在IE中不显示，也不占宽度
解决办法：在单元格中填入 

 

4、层叠顺序不对

IE中 z-index在同级、或父级生效。如下：设置a2的z-index为100，a2仍然在b1下面。需要设置a1的z-index才可以。
（这个问题其实更复杂， http://topic.youkuaiyun.com/u/20100907/14/b9067e5e-eaa6-4e2a-8071-e72b835e1204.html?01267089275027774）
<div id="a1"> <div id="a2"> </div> </div>
<div id="b1">                      </div>

 

5、 表格的宽度，因为ie盒模型计算方法不一致，有时需要设置两个值。

 

6、用作分隔符的背景图片在<=IE7版本中会长出1px，未找到真正原因。
解决办法1：修改背景图片，切小。
解决办法2：单独用一个div做分隔符的窗口，设置div的width, heigth, overflow: hidden，在此div中放置背景图片。可以裁剪出需要大小的图片。

 

7、想对iframe设置为只有水平滚动轴，在firefox, chrom中可以生效，但IE中无效，还未找到办法。

<iframe src="xx.htm" height="430" width="980"  class="tb_data_scroll_x" scrolling="auto" frameborder="0" ></iframe>
iframe.tb_data_scroll_x
{     width: 980px;
    * overflow: hidden;
    overflow-x: scroll;
    * overflow-y: hidden;
}

8、空DIV在IE6、7下会有默认宽度。
网上有设置 font-size:0;  或者 overflow:hidden; 来解决的。
最好还是避免空DIV的出现。

9、inline-block在在IE6、IE7中无效

两种解决方案：

 a) 先使用display:inline-block属性触发layout发生，然后再定义display:inline让块元素呈现内联对象

（注意：两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典BUG)。

 b) 直接将块元素设置为display:inline呈现为内联对象，然后触发layout(如zoom:1)。

10、IE下多张图片垂直排列时有空隙的BUG
可心通过设置 img 的 vertical-align: bottom;来规避。
还有有多种解决方案：请见 http://www.websbook.com/htmlcssdiv/IExdtpkxjjBUGhjjbf_16115.html

11、浮出层部分会遮住

问题描述：有链接A, div B。期望鼠标移到链接A时，div B在链接A旁边浮出。实际浮出成功，但会被下面的DIV遮住。

原因：对divB设置了 position：relative，，其父元素设置了position: relative，以便相对于父元素偏移一点。结果使div B也与父元素在同一个z-index

去掉父元素的position: relative，则div相对于body定位。这样才能显示到最上层