HTML5全栈开发之hack的书写规范

cainiaohaha

　　在HTML5全栈开发中，不同浏览器对于W3C的标准是不一样的，且各个浏览器对页面的解释也是不相同的，例如IE浏览器在很多时候就会与FF存在3px的差距，而这些差异性，就需要我们去利用css中的hack来调整了，具体操作方法请看下面介绍。

　　IE6、IE7、Firefox兼容写法：

　　写法一：

　　IE识别*;浏览器(如FF)不能识别*;

　　IE6识别*，但不识别 !important,

　　IE7识别*，识别!important;

　　FF不能识别*，能识别!important;

　　据上述表达，同一类/ID下的CSS 　hack都可写为：

　　.searchInput {

　　background-color:#333;/*全部可以*/

　　*background-color:#666　!important; /*仅IE7*/

　　*background-color:#999; /*仅IE6及IE6以下*/

　　}

　　书写顺序基本为：FF、IE7、IE6.

　　写法二：

　　IE6可识别“_”，IE7及FF不能识别，所以只针对IE6与IE7及FF之间的区别时：

　　.searchInput {

　　background-color:#333;/*通用*/

　　_background-color:#666;/*IE6可识别*/

　　}

　　写法三：

　　*+html 与 *html 是IE特有的标签, Firefox 是暂不支持的。

　　.searchInput {background-color:#333;}

　　*html .searchInput {background-color:#666;}/*仅IE6*/

　　*+html .searchInput {background-color:#555;}/*仅IE7*/

　　屏蔽IE：

　　select是选择符，根据情况更换。第二句是MAC safari浏览器特有的。

　　*:lang(zh) select {font:12px !important;} /*FF的专用*/

　　select:empty {font:12px !important;} /*safari可见*/

　　IE6可识别：

　　主要通过CSS注释分开属性与值，注释在冒号前。

　　select { display /*IE6不识别*/:none;}

　　IE的if条件hack：

　　所有IE识别：

　　Only IE

　　IE5.0可识别:

　　Only IE 5.0

　　IE5.0、IE5.5都识别:

　　Only IE 5.0+

　　仅IE6识别:

　　Only IE 6-

　　IE6及IE6以下的IE5.x都识别:

　　Only IE 6/+

　　仅IE7识别:

　　Only IE 7/-