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

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 6 浏览 • 4 个月前

如何让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 {
width:400px;margin:40px;border:4px solid red;padding:40px;
widt/h:240px;
}

或者

.box {
width:400px;margin:40px;border:4px solid red;padding:40px;
voice-family:"\"}\"";
voice-family:inherit;
width: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; width: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;width: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;width: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;
  width:80px;
  height:80px;
  border:10px solid red;
}
/*解决IE父元素的overflow属性为auto时出现出现收缩现象，
同时解决IE父元素不能解析margin-bottom的问题*/
.clear {clear:both;}

下面是解决后的效果。

运行代码

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;width: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 { width: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; width:201px; height:201px; margin:12px; } .border{ height:100%; background:#FF3333; } .tr{ position:absolute; top:0; right:0; width:20px; height:20px; background:blue; } .br{ position:absolute; bottom:0; right:0; width:20px; height:20px; background:blue; } </style> <p><hr /><br /> <div id="odd"><br /> <div class="border"></div><br /> <div class="tr"></div><br /> <div class="br"></div><br /> </div></p> <pre><code> </textarea> <p><button class="runcode" title="runcode6"> 运行代码 </button></p> </li> <li> <h4 class="title">IE6 中 line-height 属性失效 <button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p> 如果我们想实现单行文本垂直居中，利用 CSS 有一个简捷的方法，就是设置 height 与 line-height 等高了，但现在注意了，万恶的 IE6 又给我们找麻烦来了！</p> <p> 出现条件：IE6 下，line-height 对带有置换元素的整行文字不起作用，应该是撤撤底底的无效，换句话说置换元素是没有行间距的。这里我们首先要知道的是什么是置换元素，W3C 官方对于置换元素的解释为——置换元素（replaced element）主要是指 img，input，textarea，select，object 等这类默认就有 CSS 格式化外表范围的元素。</p> <p><strong> 解决办法 </strong>: 添加以下样式 </p> <div><div id="highlighter_863950" class="syntaxhighlighter nogutter css"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="css plain">*html input,img,select,textarea{</code><code class="css keyword">margin</code><code class="css plain">: 计算得到的半间距 px </code><code class="css value">0</code><code class="css plain">;</code><code class="css keyword">vertical-align</code><code class="css plain">:</code><code class="css value">middle</code><code class="css plain">;}</code></div></div></td></tr></tbody></table></div></div> <p> 半间距的公式为 (<span class="blue">line-height </span>- <span class="blue">font-size</span>)/2</p> <p> 相关演示 </p> <textarea id="runcode7" style="width:75%" rows="10"><style type="text/css"> </code></pre> <p>body{<br /> color:#333;<br /> line-height:1.5em;<br /> }<br /> p,button,body{<br /> margin:0;<br /> padding:0;<br /> font-size:12px;<br /> }<br /> .parent{<br /> height:48px;<br /> margin:20px;<br /> border:1px solid #EEF;<br /> line-height:48px;<br /> text-align:center;<br /> }<br /> img,input,select,textarea,object{<br /> vertical-align:middle;<br /> }<br /> </style><br /> <h2>IE6 下 line-height 属性失效问题 </h2><br /> <hr /><br /> <div class="parent"><br /> IE6 下 line-height 正常 <br /> </div><br /> <div class="parent"><br /> <span>IE6 下 line-height 正常 </span><br /> </div><br /> <div class="parent"><br /> <span><img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/r_face12.gif">http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/r_face12.gif</a>" /> 当文字中图片时 IE6 下 line-height 失效 </span><br /> </div><br /> <div class="parent"><br /> <span><input type="button" value="button" /> 当文字中有 input 时 IE6 下 line-height 失效 </span><br /> </div><br /> <div class="parent"><br /> <span><select><option selected="selected"> 请选择性别 </option></select> 当文字中有 select 时 IE6 下 line-height 失效 </span><br /> </div><br /> <div class="parent"><br /> <span><textarea>me</textarea> 当文字中有 textarea 时 IE6 下 line-height 失效 </span><br /> </div><br /> <div class="parent"><br /> <span><object><param name="" value="" /></object> 当文字中有 object 时 IE6 下 line-height 失效 </span><br /> </div><br />
运行代码

3 像素 Bug

研究布局时不得不注意的 Bug!

出现条件：在 IE6 中，当浮动元素与浮动的文本并列相邻时，
与浮动元素高度相同的浮动文本会与其容器的 border(是 border-left 或 border-right 看这两个父容器的具体位置) 之间多出三像素。

解决办法: 激活浮动文本父元素的 hasLayout 属性，zoom:1 或 height:1%；最土的方法就是让浮动元素靠流行文本的那一边的边界减去 3 像素。

Bug 演示

<style type="text/css"><br /> #float{float:left;width:100px;height:100px;background:red;}<br /> #flow{border:1px solid blue;margin-left:120px;}<br /> </style><br /> <div id="float"> 浮动元素 </div><br /> <div id="flow"><br /> 流动文本 <br /><br /> 流动文本 <br /><br /> 流动文本 <br /><br /> 流动文本 <br /><br /> 流动文本 <br /><br /> 流动文本 <br /><br /> 流动文本 <br /><br /> 流动文本 <br /><br /> </div><br />
运行代码

此外还有许多许多，如 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-width: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\0;   /*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 */
}
}

http://www.url114.com/roller/yunji/date/20090213 http://www.silentash.com/blog/2008/54.html http://www.cnblogs.com/zhengchuyu/ http://dancewithnet.com/2006/05/18/css-alpha-transparent/

如何让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

3 像素 Bug

CSS hack

如果您觉得此文有帮助，可以打赏点钱给我支付宝 1669866773@qq.com ，或扫描二维码

相关帖子

随便看看

如何让CSS实现多游览器兼容