针对 Chrome、Safari、Firefox、Opera 的 CSS HACK

[ 作者:笑傲江湖 发布于:2012年-8月-1日 14:27 星期三  分类:百 宝 箱 ]

  浏览器品种层出不穷啊,都要伺候好。当然,很多国产浏览器,诸如腾讯浏览器,搜狗,世界之窗,360 浏览器等等,这些也没空去研究了,不知道分别使用的什么内核,暂且不管了。IE6-9 倒是之前说过怎么单独去 HACK,这里就不提了,下面是针对 Chrome/Safari、Firefox、Opera 的 CSS HACK,互不影响,只对各自浏览器起作用,测试了一下,没啥问题,可用。记录下来,将来还会用到。注意,下面的代码一定要放到样式表文件的最后,原因吗,你懂的。
/* style fix for chrome & safari  */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.yourclass { }
	#yourid { }
}
/* style fix for firefox  */
@-moz-document url-prefix() {
	.yourclass { }
	#yourid { }
}
/* style fix for opera  */
@media not screen and (1) {} /* 这一行不要删除,否则下面的不起作用。  */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
	.yourclass { }
	#yourid { }
}
/* 测试浏览器版本:chrome 20.0.1132.57 、firefox 12.0、opera 11.62 可用,其他版本未测试  */
2012年8月3日补充:
  上面那个针对Opera的Hack,对付11.xx版的可以,Opera12的失效,于是又找了一个:
/* Opera only */
@media all and (min-width: 0px){
    .classname {}
}
  在完善一下:
/* Internet Explorer hacks */
.class {
  width:200px; /* All browsers */
  *width:250px; /* IE */
  _width:300px; /* IE6 */
  .width:200px; /* IE7 */	
}

/* Safari only */
html:lang(en)>body  .classname {}

/* Chrome only */
body:nth-of-type(1) p{
   color: #333333;
}
  另外,使用 jQuery 的浏览器检测脚本,也是一个办法,可以判断用户使用的是什么浏览器,然后加载特定的样式表,参看这里:
http://www.tvidesign.co.uk/blog/CSS-Browser-detection-using-jQuery-instead-of-hacks.aspx
  为了兼容性更好,后期少做HACK的工作,样式表里提前重置一下各种元素的初始值,将来头疼事情会少很多。
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

标签: Chrome CSS IE Opera hack Safari、Firefox

评论0 引用0 浏览7283

说点什么:

正文内容:

 




图片博文
酷热难耐啊