html部分兼容性总结

部分兼容性总结一下:

1.background-color的兼容性: 火狐正常,可以同时在后面加上!important(只有火狐识别,其他的不识别,火狐优先,位置必须放在开头)。 IE,谷歌,360,欧朋设置为*background-color。就是在background-color加个*

2.margin的兼容性: 第一,IE,谷歌采用-webkit-transform:translate(xxpx,xxpx) 第二,在IE下,当一个div设置了float后,然后给他设置margin,就会出现加倍的margin,解决的办法是给div设置display:inline。

3.font-size的兼容性: 文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。谷歌不支持小于12px的字体。推荐使用em为尺寸单位

4.img的兼容性: <div> <img src=”" mce_src=”" /> </div> 把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写 <div> <img src=”" mce_src=”" /></div> 后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案:给img设定 display:block。

5.透明度:filter:alpha(opacity=30);修改数值就可以改变透明度

posted @ 2016-09-19 19:17  逗比煎饼侠  阅读(222)  评论(0编辑  收藏  举报