浏览器的兼容问题

面试时遇到一个问题： 如何设置高度为1像素的div。

   查资料，显示在IE6中 div的默认高度是一个最小字体的高度，在其他浏览器中高度确是1px。这样就要设置font-size：0了。

具体方法：<div style="height:1px;font-size:0; overflow:hidden;linehight:1px;"></div>

面试时会问到兼容性问题，之前没总结过，回答的比较结巴。现在总结下：

1.不同浏览器的标签的外补丁和内补丁不同：解决方案： *{margin:0; padding:0};

2.块属性标签float后，在IE6下显示margin比设置的大的问题。：解决方案：在float的标签样式控制中加入display：inline，转化为行内属性。

3.设置较小高度标签（一般小于10px）在IE6，IE7，遨游中高度超出自己设置的高度。解决办法：给标签设置overflow：hidden，或者设置行高line-height小于设置的高度。 （应该是font-size问题吧）。

4.图片有默认间距：几个img标签放在一起，有些浏览器会有默认的间距，加了margin：0；padding：0；也不起作用.解决方法：使用float去掉这些间距。

5标签最低高度设置min-height IE不兼容。解决方案：如果要设置一个标签的最小高度200px，需要进行的设置为：

{min-height:200;height:auto !important; height:200px; overflow:visible;}

 6.上下margin重合，相邻的margin-left与margin-right不会重合，但是相邻的margin-top及margi-bottom会产生重合，不管是ie还是Firefox都有这问题。解决办法：页面统一只设置一面高。

7.IE下select元素显示问题：浏览器解析页面时，会先判断元素类型，如果是窗口类型的，会优先于非窗口类型的元素，显示在页面最顶端，如果是非窗口类型的，才会判断z-index的值，select在IE6下是以窗口形式显示的，导致的情况是想要弹一个层，结果select出现在层上面。解决办法：用一个和弹出层同样大小的iframe放在层下面，select上面，用iframe遮住select，比如设置弹出层的z-index是2，iframe是1，使iframe位于层下方。<select><option>aaa</option></select><div></div><iframes src="a.htm"></iframe>

8.IE6对png透明度的支持问题。IE6对png的透明度的支持并不好，本该透明的地方，在IE6下会显示为浅蓝色，可以用ie6的私有滤镜功能来解决问题。方案：filter：progid：DXImage Transfrom。Microsoft.AlphaImageLoader(src=‘png图片路径’，sizingMethod=‘crop’)

9.IE3px问题：在一个div中设置文字，但是，在iE中文字左侧距div的边框有3px的距离。解决办法：设置display:inline-block;