主流浏览器css兼容问题的总结

时间 2019-11-19

原文原文链接

最近又搞了一波网站的兼容,因为要求ie浏览器仍是要兼容到ie8，因此调起来仍是各类蛋疼。css

如今就post一些作兼容的总结，可能不够全面，可是能够告诉你们如何避过一些坑。主要测试了chrome，firefox，ie八、九、11，360浏览器。html

1、基本的css兼容：css3

一、可能不少人喜欢用css hack的形式去兼容ie浏览器，可是我本身用起来感受其实很差使。ie7-就不考虑了，问题在哪呢，就在ie8的甑别上，你怎么让样式只对ie8起做用。上网搜你可能会获得这样的答案：web

.selector { 　　color: #ff0\0;/*ie8*/ 　　color: #f00\9\0;/*ie9+*/ }

可是实际上你一试就嗝屁了，由于ie8他就是识别ie9能识别的，因此根本不能让独立的样式只对ie8起做用。chrome

（这个hack是能够区分ie8和ie9的，以前因为未知缘由致使浏览器测试不成功，重装系统后发现是可用的，后来又在多台机器上测试过，证实是正确的。很抱歉误导了你们，特此修正，仍然建议用文档注释的方式去独立写hack，固然最好是能够优雅降级，避免使用css hack。）浏览器

更好用的是什么呢，是用ie浏览器独有的文档注释的方式。像这样：sass

<!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]-->

屡试不爽，关键是能够独立的维护处理兼容ie浏览器的样式表，又不会淹没在一大堆css hack标识中，只须要在独立对ie8应用样式规则的地方，copy该条规则，而后在前面加上 .ie8而后就能随便写了，对付ie9也同样。框架

二、对于360双核这种找抽浏览器，听说添加如下头部meta信息可使得网页用webkit内核渲染： ide

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IE=edge：保持使用最高级别模式显示内容；布局

chrome=1：谷歌的外挂插件Google Chrome Frame（谷歌内嵌浏览器框架GCF），使用IE浏览网页时其实是使用Chrome浏览器内核渲染，最低支持IE6，但前提是客户端已经安装GCF。

但实际上这个meta标识是ie浏览器所识别的（详情：ies-compatibility-features-for-site-developers/)，并非公认的标准，因此用双核的浏览器会傲娇。固然360也会傲娇，因此有时你会发现360并不能老是（也多是我本人rp差）以chrome内核渲染你的按现代标准开发的网页。

那么试试这个吧，添加：<meta name="renderer" content="webkit">

这个meta标识是360自家实现的(详情：meta.html)，表示强制要求360这造福中国社会万千网民的浏览器用chrome的内核渲染网页。

ok，一行代码搞定360绝大部分的兼容。

2、ie8的css兼容

如今说说ie8下的css问题：

一、ie8支持:first-child,但不支持:last-child。由于前者是css2.1标准，后者是css3标准。参下：

CSS 2.1 selectors：Basic CSS selectors including: * (universal selector), > (child selector), :first-child, :link, :visited, :active, :hover, :focus, :lang(), + (adjacent sibling selector), [attr], [attr="val"], [attr~="val"], [attr|="bar"], .foo (class selector), #foo (id selector)

二、为何会发现上面的奇怪的东西（怪我css2.1和css3分不清），由于编译sass文件后发现ie8下的样式基本全歇菜了。须要注意的是，若是浏览器不支持的选择器和支持的选择器写在一块儿，那么整条规则就不起做用了。好比你不当心创造了一个伪元素（是真的伪哦）.bb:bb-child, .cc{background:#333;}那么这整条规则就不起做用了，全部浏览器在此状况下都会歇菜,.cc的样式就丢失了。

三、 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的伪元素进行设置而要嵌套多一层div呢？由于input，img，iframe等元素不支持伪元素 -_-||。:before 和:after伪元素指定了一个元素文档树内容以前和以后的内容。与'content'属性联用,指定了插入的内容（也就是你必须显性设置content 属性这两个伪家伙才能在文档中显示出来，哪怕设置content属性为空字符串也行）。做为DOM元素，伪元素都是在容器内进行渲染的, input，img，iframe等元素都不能包含其余元素，也就是否是容器，因此不能经过伪元素插入内容。

五、 table中若是不是严格的用于表格，而是用于奇葩的局部布局时（我也想问为何用来布局。。），td设置成inline-block能够排成一行，可是 ie8和ie9 下，若是td中的内容很长，即便td设置了宽度，td也会撑开并占用td设置的margin（废话，td是没有margin可言的），直到挤占全部的td 宽度之和为tr的宽度。可是td设置成float：left；就能表现成block。这个不清楚为何，可是管用。。

六、父元素的左padding会和子元素的左margin重叠。这个是没有好好实现盒子模型的事情了，包容吧。。

七、sprite图中的icons之间最好留空白间隔，哪怕间隔1px也好，不然ie8下会出现使用了某一个icon当背景，icon后面跟着的其余icon也顺带显示了一小部分的bug，因此icons之间仍是要适当留白，不要太省。

3、ie11部分css问题

一、 ie11下不少元素表现和其余浏览器不一致，好比对应用了同同样式（不设置高度）的div，其余浏览器解析的高度是一致的，可是ie11下该div有可能高度偏大，由此致使一些排版上的问题，因此，若是发现元素排版上下偏移的问题，查看此元素或其当代元素是否设置了高度，统一添上高度一切都ok了。

二、抱歉，ie11问题确实很少。

4、结尾附上一个关于css优先级的奇谈

首先咱们知道：

一、id选择器优先级权重比class选择器大一个数量级，class选择器权重比标签选择器大一个数量级；

二、class选择器和属性选择器同优先级;

三、样式的优先程度须要根据第1条规则计算总体的优先级，按选择器权重计算各条样式规则中全部选择器优先级之和，哪条规则权重大，那条就说了算。若是相同那么后面的覆盖前面的。

四、像这种.dog > p开挂，多了特殊符号的，并不会增长优点，仍是和 .dog p优先级同样。

而后能够抛出一个问题了：

对于下面的文档结构，分别对 p | .p | div p | .parent | #parent设置color属性，那么优先级如何呢？

<div id="parent" class="parent">
 <p class="p">p</p>
</div>

结果颇有意思：

也就是 .p > div p > p > #parent > .parent

id选择器竟然比p选择器优先级还低！将p元素和div元素分开看，.p > div p > p 很正常， #parent > .parent也很正常。因此问题关键在子级p和父级#parent, 子级的选择器优先级比父级的选择器优先级高，或者说继承的优先级程度比自身的优先级低！

嵌套多一层看看就知道是否是了，分别对#parent | div | p设置color属性：

<div id="parent" class="parent">
  <div class="mid">
    <p id="p" class="p">p</p> 
  <div>
</div>

结果确实是p > div > #parent：

即便应用两个选择器也无济于事，依然是p >#parent div

可是只要能定位到p元素，那么父级选择器的权重就起做用了,一试便知，对#parent p | #p 设置一样的样式结果是这样的：

嗯，确实如此。因此：

五、css样式优先级还和继承有关，继承的优先级不如自己应用的优先级高。

总结完毕，敬礼。

-------------------------------本文地址： http://www.cnblogs.com/suspiderweb/p/5277540.html