最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8，所以调起来还是各种蛋疼。

现在就post一些做兼容的总结，可能不够全面，但是可以告诉大家如何避过一些坑。主要测试了chrome，firefox，ie8、9、11，360浏览器。

一、基本的css兼容：

1、可能很多人喜欢用css hack的形式去兼容ie浏览器，但是我自己用起来感觉其实不好使 。ie7-就不考虑了，问题在哪呢，就在ie8的甑别上，你怎么让样式只对ie8起作用。上网搜你可能会得到这样的答案：

.selector {

　　color: #ff0\0;/*ie8*/

　　color: #f00\9\0;/*ie9+*/

}

但是实际上你一试就嗝屁了，因为ie8他就是识别ie9能识别的，所以根本不能让独立的样式只对ie8起作用。

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

更好用的是什么呢，是用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]-->

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

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

<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绝大部分的兼容。

二、ie8的css兼容

现在说说ie8下的css问题：

1、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)

2、 为什么会发现上面的奇怪的东西（怪我css2.1和css3分不清），因为编译sass文件后发现ie8下的样式基本全歇菜了。需要注意的是，如果浏览器 不支持的选择器和支持的选择器写在一起，那么整条规则就不起作用了。比如你不小心创造了一个伪元素（是真的伪哦）.bb:bb-child, .cc{background:#333;}那么这整条规则就不起作用了，所有浏览器在此情况下都会歇菜,.cc的样式就丢失了。

3、 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的内容显示有问题，会上下隐藏部分内容，她就是要躲猫猫。

4、 为什么上面我不用input的伪元素进行设置而要嵌套多一层div呢？因为input，img，iframe等元素不支持伪元素 -_-||。:before 和:after伪元素指定了一个元素文档树内容之前和之后的内容。与'content'属性联用,指定了插入的内容（也就是你必须显性设置content 属性这两个伪家伙才能在文档中显示出来，哪怕设置content属性为空字符串也行）。作为DOM元素，伪元素都是在容器内进行渲染的, input，img，iframe等元素都不能包含其他元素，也就是不是容器，所以不能通过伪元素插入内容。

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

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

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

三、ie11部分css问题

1、
ie11下很多元素表现和其他浏览器不一致，比如对应用了同一样式（不设置
高度）的div，其他浏览器解析的高度是一致的，但是ie11下该div有可能高度偏大，由此导致一些排版上的问题，所以，如果发现元素排版上下偏移的问题，查看此元素或其当代元素是否设置了高度，统一添上高度一切都ok了。

2、抱歉，ie11问题确实不多。

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

首先我们知道：

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

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

3、样式的优先程度需要根据第1条规则计算整体的优先级，按选择器权重计算各条样式规则中所有选择器优先级之和，哪条规则权重大，那条就说了算。如果相同那么后面的覆盖前面的。

4、像这种.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 设置同样的样式结果是这样的：

嗯，确实如此。所以：

5、css样式优先级还和继承有关，继承的优先级不如本身应用的优先级高。

css 浏览兼容问题及解决办法 （1）的更多相关文章

  1. css 浏览兼容问题及解决办法 （2）

    1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. ...

  2. CSS常见兼容问题以及解决办法

    浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况. 这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safar ...

  3. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

  4. 关于box-shadow、border-radius不兼容ie8的解决办法

    本来从css3兼容ie9+挺好的,可是总有一些共识要求ie8+,于是就有了我们的苦逼的找解决办法.之前在网上查到一些说用 PIE.htc. But 我就是按照他说的写的没有管用.请教了一下别人才会写了 ...

  5. HTML兼容问题及解决办法

    标准浏览器子元素不会撑开父元素设置好的宽度,IE6下会的: <style> .box{ width:400px;} .left{ width:200px;height:300px;back ...

  6. CSS高度坍塌原因及解决办法

    在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷.由于父 ...

  7. div+css常见浏览器兼容问题以及解决办法

    1.图片下方出现几像素的空白间隙问题说明:这个问题在ie6和ff(火狐)下经常见到,例如 <div><img src=""/></div>这个图 ...

  8. Chrome不支持css字体小于12px的解决办法

    我们先来看个效果图(chrome下): 从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时,显示的都是一样大小,都是默认12px: 那么网上有一个方法就是给当前样式添加Chr ...

  9. js 浏览器兼容问题及解决办法

    JS中出现的兼容性问题的总结 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题  我们都知道js通过style不可以获取行外样式,当我们需要获取行 ...

随机推荐

  1. 端口扫描器--利用python的nmap模块

    安装nmap模块挺麻烦的,搞了半天 不仅要安装pip install nmap 还要sudo apt install nmap 给出代码,没有设多线程,有点慢,注意端口的类型转换,搞了很久 #!/us ...

  2. XSS基础学习

    XSS基础学习 By:Mirror王宇阳 什么是XSS XSS攻击是指在网页中嵌入一段恶意的客户端Js脚本代码片段,JS脚本恶意代码可以获取用户的Cookie.URL跳转.内容篡改.会话劫持--等. ...

  3. Ubuntu TTY 字体大小 目录颜色 中文乱码 设置

    TTY有很多不舒服的地方,没有中文 目录是深蓝色的看不清楚 字太小. 通过设置让终端更舒服一些. 进入TTY 从桌面进入TTY: 按`Ctrl+Alt+F[1-9] 有的版本图形界面在F7和F8,有的 ...

  4. redis订阅发布简单实现

    适用场景 业务流程遇到大量异步操作,并且业务不是很复杂 业务的健壮型要求不高 对即时场景要求不高 原理介绍 redis官网文档:https://redis.io/topics/notification ...

  5. 权限认证基础:区分Authentication,Authorization以及Cookie、Session、Token

    1. 认证 (Authentication) 和授权 (Authorization)的区别是什么? 这是一个绝大多数人都会混淆的问题.首先先从读音上来认识这两个名词,很多人都会把它俩的读音搞混,所以我 ...

  6. 递推预处理 + Manacher

    链接:https://www.nowcoder.com/acm/contest/131/D来源:牛客网 字符串 S 只包含小写英文字母.有四种操作,每次操作你可以选择其中一种: 删除字符串的第一个字母 ...

  7. 【智能合约】编写复杂业务场景下的智能合约——可升级的智能合约设计模式（附Demo）

    智能合约的现状 以太坊在区块链上实现了智能合约的概念,用于:同质化通证发行(ERC-20).众筹.投票.存证取证等等,共同点是:合约逻辑简单,只是业务流程中的关键节点,而非整个业务流程.而智能合约想解 ...

  8. LeetCode 第三题--无重复字符的最长子串

    1. 题目 2.题目分析与思路 3.思路 1. 题目 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc",所以其长度为 3 ...

  9. 如何添加.pch文件

    1.Create a pch , call name is project+xxx.pch For example: DuoME-PrefixHeader.pch 2.在project——>Bu ...

  10. Python基础————文件操作

    文件操作 4.1 文件基本操作 obj = open('路径',mode='模式',encoding='编码') # 表示要干嘛 读 还是写 obj.write() #写什么内容 obj.read() ...