收集的关于浏览器兼容问题,有些小技巧一旦熟练运用会使今后工作中效率大增



消除浮动利器

在浮动层后面加入<br clear="all" style="line-height: 0" />

clear是br自带的属性

clear="all"等同于 .clear {clear:both;}

 

IE和FF下对”li“的的高度解析不同

可以不定义高度,直接定义行高。再让li浮动 消除IE的BUG。

 

IE:3像素问题

出现3像素BUG 时, 可以采用右边层margin-right: -3px; 解决。

 

需要图片在层中是垂直居中

当需要图片在层中是垂直居中,可以图片定义vertical-align: middle;,再在图片左侧加入<span></span>,定义样式display: inline-block; height: 100%; vertical-align: middle; 就是兼容的了。

 

子元素浮动,父元素不能自动适应高度

FF IE7下可以在父元素定义overflow: auto; IE6加入 zoom: 1; 这个触发IE的.layout。清楚浮动也可以解决,如<br clear="all" style="line-height: 0" />。

 

IE6双边距

浮动元素的外边距会加倍,但与第一个浮动元素相邻的其他浮动元素外边距不会加倍。解决方法:在此浮动元素增加样式 display:inline;

 

IE下图片产生的间隙

父元素直接包含<img>,这个图片下方会和父元素边缘产生间隙。解绝方法:

1.在源代码中让</div> 和<img>在同一行,因为那个间隙是由换行符产生的。

2.给<img>添加样式 display:block;

 

IE下高度低于10像素时问题

块元素最小高度为10px,当高度定义小于10px时,仍为10px; 解决方法:为此块元素添加样式 overflow:hidden; 或font-size:0;

 

IE,FF下列表的li为浮动,则列表后面的元素不能换行的问题

解决方法:为这个ul定义合适的高或给包含这个ul 的父div定义合适的高,或者给“overflow:hidden;”。或清楚浮动<br clear="all" style="line-height: 0" />

 

IE,FF下子元素的上下外边界问题

IE6:子元素的上边距和父元素的上内边距叠加。FF:子元素的上边距和父元素的上内边距相加。解决方法:

1、给父元素定义内边距。

2、父元素设置边框,子元素定义上外边距。

3、父元素定义overflow: hidden;,子元素定义上外边距。

 

IE,FF高度自适应问题(最小高度)

在IE6下子元素的高度能够撑开父元素,但FF,IE7下不可以。解决办法:父元素定义min-height:高度值; height:auto !important; height:高度值; (要注意先后顺序不能错)

 

IE,FF高度自适应问题(最大高度)

给父元素定义max-height: 180px; _height: expression( this.scrollHeight > 180 ? "180px" : "auto" ); -webkit-max-height: 180px;中间一条是解决IE6问题,后面的是解决webkit内核浏览器的。

 

子元素负边距问题

IE6:超出父元素的部分会被父元素覆盖。FF:分两种情况当父元素有边框或内边距时,超出父元素的部分会覆盖父元素;没有时父元素拥有负边距。

解决方法:子元素定义相对定位。(此条,见天并没有印象遇到过,所以不确定

 

IE6诡异的奇数宽高BUG

当父元素相对定位,子元素绝对定位时,倘若父元素的高或宽的数值是奇数,那么IE6下绝对位置会出错。

解决方法: 数值改成偶数。

 

IE6和IE7下,相对定位元素不能滚动的Bug

这个BUG以前没遇到过,近期配合自动滚屏时遇到了,开始以为是JS问题,在哪找啊找,后来无果,尝试看看是不是CSS的问题,果不其然,万恶的IE6,7,当设置了position: relative后,其元素就不能滚动了,要想解决其BUG,需要使其包裹他们的父元素也相对定位,这个时候IE7可以完美解决,IE6嘛,里面的定位坐标可能需要实时修正下。