css兼容性大坑

最新推荐文章于 2023-03-15 11:20:43 发布

ditu3745

最新推荐文章于 2023-03-15 11:20:43 发布

阅读量55

点赞数

原文链接：http://www.cnblogs.com/hjsblogs/p/6138401.html

版权

一、

\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

ditu3745

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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以...
复制链接

扫一扫