浏览器兼容之IE6\IE7\IE8专用CSS样式--css ie6,ie7,ie8 兼容性写法,CSS hack写法

来源：TOP博客整理发布时间：2019-06-11 11:20:07 阅读：

拿color:#000; 这个一个样式为例：

IE6专用样式： _color:#000 ;

IE7专用样式： #color:#000;

IE8专用样式： color:#ooo\0;

IE6、7、8共用：color:#000\9;

IE6、7共用：*color:#000;

=======================

经测试，在样式后加\0或\9，IE9也一样可以解析，所以，这不能算是专用样式。

margin-bottom:40px; /*ff的属性*/

margin-bottom:140px\9; /* IE6/7/8的属性 */
color:red\0; /* IE8支持 */
*margin-bottom:450px; /*IE6/7的属性*/ +margin-bottom:450px;

_color:#ff0000; /* 只ie6支持 */

#1 { color: #333; } /* FF环境 */

* html #1 { color: #666; } /* IE6环境 */

*+html #1 { color: #999; } /* IE7环境 */
一、CSS hack写法

    书写顺序为FireFox在最前，其次是IE8、IE7，最后是IE6。

       color:red;//所有浏览器

      color:blue\9;//所有IE

      +color:orange;//IE7

      _color:green;//IE6

    若浏览器为FireFox，
那么color:red；若浏览器为IE8，根据CSS优先性原则，color:blue；若为IE7，color:orange；若为IE6，则color:green。

    IE6识别 * 、_

    IE7识别 * 、+

    IE8识别 * 、\9,\0

    只有IE8识别  \0/

    ie9只识别：\9

    FF什么都不识别

OCTYPE标准firfox与ie6 padding的问题

首先我们说说firefox和IE对CSS的宽度显示有什么不同：
其实CSS ’width’ 指的是标准CSS中所指的width的宽度，在firefox中的宽度就是这个宽度。它只包含容器中内容的宽度。而Internet Explorer ’width’

则是指整个容器的宽度，包括内容，padding ，border。
Firefox中：容器占的宽度=内容宽度+padding宽度+border宽度
IE中：内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度

　　所以，如果IE中定义 width:120px;padding:5px 的话，所显示的宽度就是120px.
即padding:5px是在width里面。
而Firefox中，上面这个定义，显示宽度就是 125 px;
所以，我们就必须这样定义
width:115px !important;width:120px;padding:5px;

必须注意的是， !important; 一定要在前面。
除了在不同的浏览器上会有这个问题，还有可能是在编码时引用了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

这个头，他在ie浏览器下要支持w3标准，w3的padding和firfox标准相同，所以也会出现上面的情况

=====================================================================================
网站如何同时兼容IE6、IE7、IE8

第一招：给常用CSS规定属性值。
```
 
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}
 
img{border:0px;}
 
ul {margin:0px;padding:0px;}/
 
ul li {list-style:none;}
```
上面的建站常用代码就相是格式化CSS样式，让各浏览器按照我们设置的属性值渲染网页

第二招：IE和FF下对象居中问题
IE下大家应该知道只要设置body{text-align:center;}这样就可以居中显示。
但是这样的方法在FF不行的。这里就需要给修改成body:{text-align:center;margin:0px auto;}Margin的意思就是上下距离为0像素，左右为自动。所以FF就会居

中显示。

第三招：垂直居中（仅只用于一行）
比如说一个高30px的div，问题默认是会显示在左上角，如果想垂直居中对其可以加个line-height:30px;样式。如果你想让他居下方则在修改line-height:30px;

数值越大越局下，为了防止撑破层，还需要再给一个样式overflow:hidden;(超出的部分不显示)

第四招：给每一个块对象设置三个样式
width:**px;height:**px;overflow:hidden;即便高、宽是属性值是自动那么也需要去设置这三个样式。目的就是解决浏览器默认值的问题。

第五招：针对IE6、IE7、FF的css样式(这一招在特殊情况下经常用到)
原来建设网站经常使用!important来设置优先权，但有了IE7之后就不行了。下面给大家个可以解决IE6、IE7、FF各个CSS优先权的方法
```
 
#1 { color: #333; } /* FF环境 */
 
* html #1 { color: #666; } /* IE6环境 */
 
*+html #1 { color: #999; } /* IE7环境 */
```
上面的书写顺序一定不能去改变。
这样子网页在FF下显示#333，IE6下显示#666，IE7下显示#999