(总结)css hack

最新推荐文章于 2021-09-08 21:20:29 发布

Whisper_a

最新推荐文章于 2021-09-08 21:20:29 发布

阅读量402

点赞数

分类专栏：最近总结的问题

本文链接：https://blog.csdn.net/Whisper_a/article/details/38710857

版权

最近总结的问题专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1 基本的css hack

 /* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body .sofish{display:block;}}

用媒体查询的方式确认是那种浏览器写hack

优点：全面

缺点：代码量大，不易记

2 IE的css hack

.div1{
	padding:0px;
	padding:0px\9 /*ALL IE	*/
	padding:0px\0/ *IE 8,9 */
	*padding:0px/*IE6,7*/
	+padding:0px;/*IE7*/
	_padding:0px /*IE6*/
}

优点：清晰

缺点：不全面

3IE 注释

 <!--[if IE]>IE only<![endif]-->  
<!--[if !IE]>NOT IE<![endif]-->

优点：安全容易维护

缺点：会增加HTTP请求

4 JS方法

原则：

1 尽量使用单独hack 比如_padding

2 不必兼容太古老的浏览器

3 在节省资源和兼容性上做权衡

写法：

注重单独的HACK。 IE的HACK比较多，选择省力易记的属性HACK；其他浏览器HACK少，选择块状的选择器HACK(推荐)
  .sofish{  
    padding:10px; 
    padding:9px\9; /* all ie */ 
    padding:8px\0; /* ie8-9 目前应用于IE8的单独hack，情况比较少 */
    *padding:5px; /* ie6-7 */ 
    +padding:7px; /* ie7 */ 
    _padding:6px; /* ie6 */ 
} 
/* webkit and opera */ 
@media all and (min-width: 0px){ .sofish{padding:11px;} } 
/* webkit */ 
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }
/* opera */  
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }
/* firefox * / 
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */  
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */