css兼容性大坑

一、

\9:选择IE6+

//区分 IE 8(不实用)
.title{
color:yellow\0;
color: red\9\0;
}

   \9在 IE 6及其以上都可以识别(但是 IE11不识别 ,IE 5 识别,IE5.5不识别)

 \9\0 IE8、IE11不识别,IE9 IE10 识别    

  可用:

\0:选择IE8+和Opera15以下的浏览器

  更好用的是ie浏览器独有的文档注释的方式:

<!DOCTYPE html>
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en"> <!--<![endif]--> 

 二、

   IE7 及以上版本 : 子选择符 (E>F), 相邻选择符(E+F),兄弟选择符(E~F), :fist-child , !important  

   IE 9 及以上 : :last-child  :nth-child(父元素的第n个子元素)   :nth-of-type(n) (同类型第n个同级兄弟元素)

  如果浏览器 不支持的选择器和支持的选择器写在一起,用sass写在一块那么整条规则就不起作用了

三、 

     input设置了左右padding,but输入较多内容时padding还是会消失。

  这个问题是无解的,ie浏览器她就是这么渲染input的,解决方法是在input 外面套一层div,用div设置左右padding,border,width和height,input只需要设置width和weight为

    100% 即可。

    另外,正常来讲,如果没有明确设置height的值,那么设置的line-height值就是height的值,but对于ie8,如果input 设置了 line-height,那么input必须设置height,否则input

  的内容显示有问题,会上下隐藏部分内容

四、

  input,img,iframe等元素不支持伪元素

五、

  IE8对background-position 并不是完全支持

  sprite图中的icons之间最好留空白间隔,否则ie8下会出现使用了某一个icon当背景,icon后面跟着的其他icon也顺带显示了一小部分的bug,

 

参考:http://www.cnblogs.com/suspiderweb/p/5277540.html

 

转载于:https://www.cnblogs.com/hjsblogs/p/6138401.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值