CSS中hack和注释书写规范

1、IE6、IE7、Firefox之间的兼容写法： ◆写法一： IE都能识别*;标准浏览器(如FF)不能识别*； IE6能识别*，但不能识别!important, IE7能识别*，也能识别!important; FF不能识别*，但能识别!important; 根据上述表达，同一类/ID下的CSS　hack可写为： CSS Code复制内容到剪贴板 .searchInput{ background-color:#333;/*三者皆可*/ *background-color:#666　!important;/*仅IE7*/ *background-color:#999;/*仅IE6及IE6以下*/ } 一般三者的书写顺序为：FF、IE7、IE6. ◆写法二： IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写： CSS Code复制内容到剪贴板 .searchInput{ background-color:#333;/*通用*/ _background-color:#666;/*仅IE6可识别*/ } ◆写法三： *+html与*html是IE特有的标签,Firefox暂不支持。 CSS Code复制内容到剪贴板 .searchInput{background-color:#333;} *html.searchInput{background-color:#666;}/*仅IE6*/ *+html.searchInput{background-color:#555;}/*仅IE7*/ 屏蔽IE浏览器： select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。 CSS Code复制内容到剪贴板 *:lang(zh)select{font:12px!important;}/*FF的专用*/ select:empty{font:12px!important;}/*safari可见*/ IE6可识别： 这里主要是通过CSS注释分开一个属性与值，注释在冒号前。 select{display/*IE6不识别*/:none;} ◆IE的if条件hack写法： 所有的IE可识别： OnlyIE 只有IE5.0可以识别: OnlyIE5.0 IE5.0包换IE5.5都可以识别: OnlyIE5.0+ 仅IE6可识别: OnlyIE6- IE6以及IE6以下的IE5.x都可识别: OnlyIE6/+ 仅IE7可识别: OnlyIE7/- 2、清除浮动： 在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。 CSS Code复制内容到剪贴板 select:after{ content:”.”; display:block; height:0; clear:both; visibility:hidden; }

转载于:https://www.cnblogs.com/xiaokehappy/archive/2012/03/03/2378385.html