(总结)css hack

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 */



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值