html兼容ie写法,兼容ie的css怎么写？

用户使用的浏览器五花八门，我们要保证每一种浏览器都能兼容我们的代码，不能要求用户去改变浏览器，那么就得在我们的代码上下功夫。此时我们要用到hack。

HACK就是针对不同的浏览器写不同的HTML、CSS样式，从而使各种浏览器达到一致的渲染效果。

CSS的hack：

CSS的hack包括：属性的hack和选择器的hack

设置css的hack要注意的是css样式的层叠性，给同一个元素设置的兼容写法必须写在后面，否则会被层叠掉。

(1)属性的hack

①只兼容IE6的hack

hack符：-或_，当做前缀写在属性前面，中间不加空格

在属性名前面加短横-或者下划线_(原理：高级浏览器及其他浏览器会认为这个前缀符号是一个unknown property name)，未知的属性名，不会报错，不予加载。

例：background:red; //高级浏览器识别

_background:pink; //仅IE6识别

②兼容IE6、7的hack

hack符： ` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 中的任一字符，作为前缀写在属性前面

例：background:red; //高级浏览器识别

！background:pink; //仅IE6、7识别

③只兼容IE8的hack

hack符：\0/，必须写在属性值与分号之间，中间不加空格background:red; //高级浏览器识别

background:pink\0/; //仅IE8识别

④兼容IE8、9、10的hack

hack符：\0，必须写在属性值与分号之间，中间不加空格background:red; //高级浏览器识别

background:pink\0; //IE8、9、10识别

⑤兼容IE6、7、8、9、10

hack符：\9，必须写在属性值与分号之间，中间不加空格

(2)选择器的hack

给选择器添加hack，这个选择器中的样式都是IE兼容样式，其他高级浏览器不识别，同理给同一个选择器设置的兼容样式要写在高级浏览器可识别的常规样式后面，否则会被层叠

①IE6及以下版本的hack

hack符：* html，*和html之间有空格，再加一个空格，后面写选择器

例：

.box{

width: 200px;

height: 200px;

border-radius: 50%;

background: yellowgreen;

}

* html .box{

width: 100px;

height: 100px;

background: skyblue;

}

②IE7及以下版本的hack

hack符：，英文逗号，写在选择器后面，不加空格

例：.box,{

background: #999;

border: 10px solid red;

③兼容IE6以外的其他版本的hack

hack符：html>body，写在选择器前面，与选择器之间有一个空格隔开

例：html>body .box{

background: yellow;

}

④兼容IE6、7以外的版本的hack

hack符：html>/**/或html~/**/,写在选择器前面，与选择器之间有一个空格隔开

例：html>/**/body .box{

background: purple;

}