css属性兼容主流浏览器
- 目前，对于网页中一些浏览器兼容性问题，可以使用css hack（css 招数）和浏览器Ｂug修复的方式解决。
- 名词解释：
- css Hack：针对特定浏览器编写冗余代码，这是一种欺骗浏览器的行为，预示着有更好的解决办法。
- 浏览器bug修复：针对浏览器本身的bug，使用css自有的属性，进行浏览器显示问题的修复。
- 常见浏览器兼容性解决方案：
- 1、ＩＥ有条件注释
- 代码示例：
- <!-- [ if IE8 ] >
- <style>
- @import " test.css";
- </style>
- <! [endif] -->
- 在语法中：
- <!-- [if IE8] >...<![endif]-->:用于声明浏览器版本，在该版本浏览器中使用其中的样式表。
- @import"test.css":使用导入式导入样式表
- 2、子选择器招数
- 代码示例：
- html>body {
- background-image:url(bg.png);
- }
- 在语法中:
- html>body：针对ie6及其以下版本，隐藏透明图片bg.png
- 3、*html招数
- *html {
- font-size:14px;
- }
- 在语法中：
- *html:针对ie6及其以下版本，设置字号为14像素。
- 4、!important招数
- 代码示例：
- #nav {
- font-size:18px !important; //ie7以上版本
- font-size:14px; //ie6以下版本
- }
- 在语法中：使用!important来提高权重，优先加载。
- 5、针对IE6~IE8的招数
- _：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。
- *：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高
\9：选择IE6+
\0：选择IE8+和Opera
[;property:value;]; - ：选择webkit核心浏览器（Chrome,Safari）。IE7及以下也能识别。中括号内外的3个分号必须保留，
- 第一个分号前可以是任意规则或任意多个规则[;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。
- 生效的始终是中括号内的最后一条规则，所以通常选用第一种写法最为简洁。
代码示例：
.test{
color:#c30; /* For Firefox */
[;color:#ddd;]; /* For webkit(Chrome and Safari) */
color:#090\0; /* For Opera */
color:#00f\9; /* For IE8+ */
*color:#f00; /* For IE7*/
_color:#ff0; /* For IE6*/
}
注意：同时设置多个浏览器的css hack时，必须注意浏览器版本声明顺序：高——>低，即ie8 --> ie7 -->ie6.
- 6、IE6双倍空白边距 Bug修复
- 代码示例：
- #nav {
- float:left;
- margin:10px;
- display:inline;
- }
- 产生条件：对某一元素，同时设置float属性和margin属性。
- 显示效果：在ie6中，左、右外边距加倍，上、下外边距无影响。
- 解决办法：增加display:inline;。
- 7、清除浮动Ｂug修复
- 代码示例:
- #father {
- width:100%; /* 宽度值可以为固定宽度值 */
- overflow:hidden;
- }
- 产生条件：父元素未设置浮动，而子元素设置了浮动。
- 显示效果：父元素高度得不到扩展，缩成一条，子元素从容器中溢出。
- 解决办法：为父元素设置width：宽度值；和overflow:hidden;。
