css 兼容性

转司徒正美

说是实现兼容，其实也只不过为了照顾IE6与IE7，其实不支持标准的对手早就烟飞灰灭，而像firefox，Opera，Safari等更新换代太快，就算有问题很快就被官方处理。因此这篇博文大家最好在IE6中浏览，里面可运行的例子都是为IE6准备的。

选择器

通配符 * :: IE6不支持
类选择器 .class :: IE6元素的class不能超过2个
属性选择器 [att=value] [att] [att|=value] [att(^|$|~)=value] :: IE6不支持
关系选择器 E + F; E > F ; E ~ F :: IE6不支持
属性选择器 [att=value] [att] [att|=value] [att(^|$|~)=value] :: IE6不支持
:first-letter,:first-line,:visited,:link伪类选择器 :: 都支持
:hover伪类选择器 :: IE6只支持a元素(并且一定要有href属性才行)，IE7及FF支持a以外元素
:before和:after伪类选择器 :: IE7和firefox支持

结构伪类选择器 ::只有最新的游览器才支持这种CSS3选择符，FF3.5，opera10与chrome。IE全系列歇菜。

说说用法：

E:root 匹配文档的根元素

:root { border: 1px solid blue; }
//相当于html { border: 1px solid blue; }

E:nth-child(n) 匹配所有在其父元素中排第n个的E元素。n可以是数字/关键字/公式

tr:nth-child(3) { …… }     /* 匹配所有表格里面排第3的行 */
tr:nth-child(2n+1) { …… }  /* 2n+1，公式，匹配所有奇数行 */
tr:nth-child(odd) { …… }   /* odd：关键字，匹配所有奇数行 */
tr:nth-child(2n) { …… }    /* 2n：匹配所有偶数行*/
tr:nth-child(even) { …… }  /* even：关键字，匹配所有偶数行li */

E:nth-last-child(n) 伪类同:nth-child的工作方式非常相似，不过他是从后向前数子节点

tr:nth-last-child(3n+3) {  background-color: red; }
tr:nth-last-child(3n+2) {  background-color: green; }
tr:nth-last-child(3n+1) {  background-color: blue; }

E::nth-of-type(n)伪类使用跟其他伪类类似的语法，但是允许你根据元素类型进行选取。

body:nth-of-type(1) p{
   color: #333333;
}

:nth-last-of-type同:nth-of-type功能类似，不过也是从后向前查子节点。

DocType

文档类型决定了IE的渲染模式，标准模式(standard)还是兼容模式(quirks),并且声明必须放在所有代码之前,包括注释。
```
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
不过推荐使用<!doctype html>，游览器自动会把它渲染成严格模式，而且它还是HTML5的唯一合法DocType。

Quirks模式与Standards模式的区别

quirks和standards的区别很多都可以归为IE5和IE6的区别。
- 盒模型标准模式,实际宽度=border-left + padding-left + width + padding-right + border-right兼容模式下,实际宽度 = width
- 水平居中 IE中,标准模式下可使用margin:0 auto水平居中。兼容模式下无效。
- 行内元素尺寸在标准模式下，给span等行内元素设置wdith和height都不会生效，兼容模式下可以。
- 不正确的语法如没有书写尺寸单位，大小写不正确，嵌套不正确等，兼容模式下尺寸采用默认单位px，其它的都尽量修正。标准模式下这条css规则无效。
- 相对高度元素设定百分比高度时，需要父元素高度已指定，所以最好先指定html和body元素高度为100%
- white-space: pre属性 IE6只有在标准模式中才支持这效果，相当于<pre>标签。
- 在quirk模式中，设置图片的padding会失效，Table中的字体属性不能继承上层的设置。
- IE7的新CSS特性 min/max-width/height,position:fixed,:hover,overflow:visible 等在兼容模式下会失效。
- 默认样式 FF下，在进入quirks模式后，会加载其目录下的res/quirk.css，设置一些其它的默认样式

属性

z-index

select元素在IE6，IE7中windowed元素，优先级比其他元素高，要想遮住它只靠同是windowed元素的iframe与object元素。

FLASH默认的wmode为window模式，浮动在其它html元素的上方，我们也无法通过z-index来遮住它。需要将wmode指定为transparent或者opaque。
- 元素级别层叠剖析
cursor FF 不支持cursor:hand,使用cursor:pointor

消除图片工具栏

<img src="picture.jpg" galleryimg="false"/ >
<!--        又或者       -->
<head> 
   <meta http-equiv="imagetoolbar" content="no">
</head>

防止图片放大失真

.pic {-ms-interpolation-mode: bicubic}

列表取消缩进 IE margin:0;FF padding:0

自动折行

DIV

     .wrap1 {
        word-break:break-all;
        word-warp:warp;
        over-flow:auto!important;
      }
      .wrap2 {
        white-spacing:normal;
        word-warp:warp;
        over-flow:auto!important;
      }

TABLE

     table{ table-layout:fixed; }

固定宽度不折行

     <td width="25%" nowrap><div>content</div></td>

消除ul、ol等列表的缩进时

样式应写成:list-style:none;margin:0px;padding:0px;

其中margin属性对IE有效，padding属性对FireFox有效。

去掉空DIV在IE的默认高度(

     .empty{ line-height:0%; height:0px; font-size:0pt; }

滤镜(filter)

IE私有，效率也比较低，一般不建议使用。

透明

      .transparent{
        filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);/*IE8*/
        filter:alpha(opacity=50);/*IE5,6,7*/
        -moz-opacity: .5;/*FF*/
        opacity: .5;/*W3C*/
      }

behavier与CSS Expression

IE私有的东西，实现CSS的动态编程，效率代下，现在用的人也不多了。
CSS Bug
- IE5.5及其低版本的盒子模型Bug
  
  这是IE的盒子模型的宽高是包含border与padding的
  
  解决办法:前面定义的是在IE5.5-的宽与高，后面重新定义一下在标准模式中的宽与高
```
      .box {
       400px;margin:40px;border:4px solid red;padding:40px;
       widt/h:240px;
      }
        
```
  或者
```
      .box {
       400px;margin:40px;border:4px solid red;padding:40px;
       voice-family:""}"";
       voice-family:inherit;
       240px;
      }
        
```
  PS:现在我基本放弃对IE5.5以下的兼容。
- 双倍margin Bug
  
  在IE6中，如果多个浮动元素并排显示时，且如果是左浮动并且设置了margin，那么左边第一个元素的margin-left会加倍；
  
  如果是右浮动并设置了margin,那么右边第一个元素的margin-right会加倍；
  
  如果浮动元素够多，发生折行现象，那么每行第一个（从左边数起还是从右边数起，是margin-left还是margin-right，参考上面）元素的margin会加倍。
  
  如果有两元素，一个有浮动一个无浮动，无论浮动元素在上还是在下，浮动元素的margin-left(或margin-right)都会加倍！
  
  解决办法:在浮动元素的样式中设置display:inline。
  
  预览Bug
  <style type="text/css"> #content{ margin:10px auto 0;padding:0; 230px; height:230px;border:10px solid black;background:#FF5CEC; } #content ul{ list-style-type:none;margin:0;padding:0; background:#f00; height:220px;margin-top:10px; } #content ul li{ float:left; margin:0 0 10px 10px;100px; height:100px; background:#fff; text-align:center; line-height:100px; } </style> <div id="content"> <ul> <li>#</li> <li>#</li> <li>#</li> <li>#</li> </ul> </div>
  
  另一个演示：
  <style type="text/css"> #parent {background:#ccc;float:left;} .div{background:#ff0;margin:100px;80px;height:80px;border:10px solid red;float:right;} </style> <div id="parent"> <div class="div">子容器1</div> <div class="div">子容器2</div> <div class="div">子容器3</div> <div class="div">子容器4</div> <div class="div">子容器5</div> </div>
- 父元素不能自适应子元素高度
  
  严格来说，这不是个Bug，但这是在布局中经常要用到父元素自适应子元素高度。 IE6会“聪明”地做到这一点，FF，IE7，IE8，OP等追随标准的游览器却不是这回事。我们要手动让父元素自适应。
  
  解决办法:父元素样式中显示地增加overflow:auto，但为了与IE6兼容，我们需要增加一个辅助元素，定义为clear:both，强制撑开父元素高度。
```
      #parent {
        overflow:auto;/*★★重点★★*/
        border:1px solid #000;
      }
      .children{
        display:inline;
        float:left;
        background:#ff0;
        margin:50px;
        80px;
        height:80px;
        border:10px solid red;
      }
      /*解决IE父元素的overflow属性为auto时出现出现收缩现象，
      同时解决IE父元素不能解析margin-bottom的问题*/
      .clear {clear:both;}
        
```
  下面是解决后的效果。
  <style type="text/css"> #parent {overflow:auto;border:1px solid #000;} .children{background:#ff0;margin:50px;80px;height:80px;border:10px solid red;float:left;display:inline;} .clear {clear:both;} </style> <div id="parent"> <div class="children">子容器1</div> <div class="children">子容器2</div> <span class="clear"></span> </div>
- IE子元素底边界不被解析Bug
  
  根据CSS规则，没有定义float属性的父元素不会自动计算高度，要计算高度，必须在子元素的最后添加一个辅助元素，并设置clear:both。
  
  如果我们查看《On having layout》这篇伟大的文章，里面有更多的方法，如zoom:1,由于它们都是比较危险且难以通过校验，因此建议使用官方的。
  
  因此我就把父元素也浮动吧，这个以前我也在多篇博文中提过，这种浮动嵌套会产种向内收缩的现象。
  
  注意和上面“父元素不能自适应子元素高度”的解决方案比较，它们只有稍微的差异。
  
  解决办法:父元素也浮动。
  
  解决演示
  <style type="text/css"> #parent {float:left;border:1px solid #000;} .children{display:inline;float:left;margin:50px;80px;height:80px;border:10px solid red;background:#ff0;} .clear {clear:both;} </style> <div id="parent"> <div class="children">子容器1</div> <div class="children">子容器2</div> <span class="clear"></span> </div>
- 注释Bug
  
  又名为浮动容器的字符复制BUG。
  
  出现条件:在浮动的DIV元素的旁边添加注释，div内部的文字会被复制（复制的个数和注释的个数相同），并置于浮动元素的下方。
  
  解决办法:不要注释。
  
  Bug演示
  <style type="text/css"> div { 100%; float:left; } </style> <div>段落</div> <div>段落</div> <div>段落</div> <div>段落</div> <div>段落</div>
- E6下absolute定位相差1px的Bug
  
  1.外层元素用position:relative定位，并且实际content宽/高为奇数；
  
  2.内层元素使用position:absolute定位，并且使用了bottom/right定位。
  
  解决办法:父元素的宽高设为偶数。
  
  Bug演示
  <h2>IE6下absolute定位相差1px的BUG</h2> <style type="text/css"> #odd{ position:relative; 201px; height:201px; margin:12px; } .border{ height:100%; background:#FF3333; } .tr{ position:absolute; top:0; right:0; 20px; height:20px; background:blue; } .br{ position:absolute; bottom:0; right:0; 20px; height:20px; background:blue; } </style> <hr /> <div id="odd"> <div class="border"></div> <div class="tr"></div> <div class="br"></div> </div>
- IE6中line-height属性失效
  
  如果我们想实现单行文本垂直居中，利用CSS有一个简捷的方法，就是设置height与line-height等高了，但现在注意了，万恶的IE6又给我们找麻烦来了！
  
  出现条件：IE6下，line-height对带有置换元素的整行文字不起作用，应该是撤撤底底的无效，换句话说置换元素是没有行间距的。这里我们首先要知道的是什么是置换元素，W3C官方对于置换元素的解释为——置换元素（replaced element）主要是指 img，input，textarea，select，object等这类默认就有CSS格式化外表范围的元素。
  
  解决办法:添加以下样式
```
              *html input,img,select,textarea{margin:计算得到的半间距px 0;vertical-align:middle;}
        
```
  半间距的公式为(line-height - font-size)/2
  
  相关演示
  <style type="text/css"> body{ color:#333; line-height:1.5em; } p,button,body{ margin:0; padding:0; font-size:12px; } .parent{ height:48px; margin:20px; border:1px solid #EEF; line-height:48px; text-align:center; } img,input,select,textarea,object{ vertical-align:middle; } </style> <h2>IE6下line-height属性失效问题</h2> <hr /> <div class="parent"> IE6下line-height正常 </div> <div class="parent"> <span>IE6下line-height正常</span> </div> <div class="parent"> <span><img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/r_face12.gif" />当文字中图片时IE6下line-height失效</span> </div> <div class="parent"> <span><input type="button" value="button" />当文字中有input时IE6下line-height失效</span> </div> <div class="parent"> <span><select><option selected="selected">请选择性别</option></select>当文字中有select时 IE6下line-height失效</span> </div> <div class="parent"> <span><textarea>me</textarea>当文字中有textarea时IE6下line- height失效</span> </div> <div class="parent"> <span><object><param name="" value="" /></object>当文字中有object时IE6下line-height失效</span> </div>
- 3像素Bug
  
  研究布局时不得不注意的Bug!
  
  出现条件：在IE6中，当浮动元素与浮动的文本并列相邻时，与浮动元素高度相同的浮动文本会与其容器的border(是border-left或border-right看这两个父容器的具体位置)之间多出三像素。
  
  解决办法:激活浮动文本父元素的hasLayout属性，zoom:1或height:1%；最土的方法就是让浮动元素靠流行文本的那一边的边界减去3像素。
  
  Bug演示
  <style type="text/css"> #float{float:left;100px;height:100px;background:red;} #flow{border:1px solid blue;margin-left:120px;} </style> <div id="float">浮动元素</div> <div id="flow"> 流动文本<br /> 流动文本<br /> 流动文本<br /> 流动文本<br /> 流动文本<br /> 流动文本<br /> 流动文本<br /> 流动文本<br /> </div>
此外还有许多许多，如IE捉迷藏，断头台，百分比等等，解法都比较简单，以后有机会再补充……

CSS hack

网上有关这东西太多了，不想多说了，给出几个例子。

.e{
color:#FFF;/* FF,OP,IE8 */
[;color:#0F0;]/* Sa,CH */
*color:#FF0;/* IE7 */
_color:#F00;/* IE6 */
}

.e{
background-color:#332200;/* FF*/
}
html* .e{
background-color:#FF00FF;/* Sa IE7 CH */
}
*+html .e{
*background-color:#0000FF;/* IE7 */
}
* html .e{
background-color:#00FFFF;/* IE6 */
}
html*~/**/body .e{
background-color:#055000;/* IE8 */
}
@media all and(min-0){
    .e{/*Opera 9.50 beta测试通过,10.0 beta以上无效*/
        background-color:#FF5500;
    }
}

button[type] {
padding:3px 10px 4px 7px;   /* Firefox */
padding:5px 10px 5px 7px;   /*IE8 */
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
button[type]  {
padding:3px 10px 3px 7px;  /* Safari */
line-height:17px;           /* Safari */
}
}

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
head~body button[type] {
padding:4px 10px 4px 7px;   /*Opera */
line-height:17px;           /* Opera */
}
}

相关阅读:
docker中安装ssh服务
 JStorm第一个程序WordCount详解
 centos6.7 安装Docker
mysql 自连接查询数据
 display属性
 如何书写高效的css样式
 link和@import的区别
 div+css命名规则
 MATLAB的一些小技巧
 高等工程数学线性规划部分作业
原文地址：https://www.cnblogs.com/kaka100/p/3456955.html

css 兼容性

选择器

说说用法：

E:root 匹配文档的根元素

E:nth-child(n) 匹配所有在其父元素中排第n个的E元素。n可以是数字/关键字/公式

E:nth-last-child(n) 伪类同:nth-child的工作方式非常相似，不过他是从后向前数子节点

E::nth-of-type(n)伪类使用跟其他伪类类似的语法，但是允许你根据元素类型进行选取。

:nth-last-of-type同:nth-of-type功能类似，不过也是从后向前查子节点。

DocType

Quirks模式与Standards模式的区别

属性

滤镜(filter)

behavier与CSS Expression

CSS Bug

IE5.5及其低版本的盒子模型Bug

双倍margin Bug

父元素不能自适应子元素高度

IE子元素底边界不被解析Bug

注释Bug

E6下absolute定位相差1px的Bug

IE6中line-height属性失效

3像素Bug

CSS hack