面试时遇到一个问题: 如何设置高度为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;