注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

taijihome的博客

 
 
 

日志

 
 

CSS Hacks[转]  

2009-01-19 11:31:36|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Java一直标榜一句老话叫“编写一次,到处运行(Write Once,Run Anywhere)”,CSS也差一点点做到了。但就是为了差的一点点往往需要大量的工作,虽然这并不是CSS的错。基本上别妄想兼容所有的解析器了,仅仅是为了让网页在YUI中列举的A级浏览器呈现一致就不是一件特别容易的事情。虽然通过精心的组织HTML结构加上使用最合适最通用的CSS代码可能实现多浏览器呈现一致,但当在视觉的过度设计、精确到像素的规定和前端快速实现的要求的前提下,可能你不得不为不同的浏览器写不同的CSS代码,这就是CSS Hacks了。我们的目标是保持CSS简洁和没有CSS Hacks,但即使多年以前就呼吁Keep CSS simple的PPK也不得不在他的网站中使用CSS Hacks,即便如此其站点在所有的A级浏览器中也无法保持一致的呈现。所以,下面这个我常用的CSS Hacks列表或许有些用:

IE6 IE7 Firefox2+ Firefox3+ Opera9.5+ Safari3.1+
选择符{

  *属性:值;

}[1]

× × × ×
选择符{

  _属性:值;

}

×[2] × × × ×
选择符,x:-moz-any-link{

  属性:值;

}

× × ×
选择符,x:-moz-any-link,x:default{

  属性:值;

}

× × × ×
@media all and (min-width:0){

  选择符{属性:值;}

}[3]

× × × ×
@media all and (-webkit-min-device-pixel-ratio:0){

  选择符{属性:值;}

}[4]

× × × × ×

这里有一个上述CSS Hacks的应用的例子可以看看。

  • [1] 此处的*号其实也可以是.号、>号、+号和#号。但它们都不属于CSS2.1规范合法属性名的一部分,所以不能通过验证。
  • [2] 当IE7为quriks mode时和IE6为quriks mode解析相同,所以此时这个表达式在IE7中也能生效。这个hack已经应用了很久了,下划线_作为属性名的前缀是符合CSS2.1规范语法的,但不存在于其属性名列表中,所以依旧不能通过标准语法验证。对于多个IE的CSS Hacks,条件注释是一个很值得考虑的解决方案。另外对于IE8可以关注其新功能和变化,但现在考虑其CSS Hacks问题有点过早,真的有需求可以通过增加<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />来解决。
  • [3] 如果把表达式中的and和(中间的空白去掉变成@media all and(min-width:0){选择符{属性:值;}},那么Safari3+将无法识别,Opera9.5+则可以。
  • [4] 这个表达式Opera9.0是支持的。

上面这些CSS Hacks仅仅是沧海一粟,是一些简单的通用的CSS Hacks。这个世界上还存在很多很知名很经典的CSS Hacks,更多的CSS Hacks可以看这里:

  1. CSS hacks
  2. CSS Hack
  3. Will the browser apply the rule(s)?
  4. Tricking Browsers and Hiding Styles
  5. 与臭虫为友——浏览器补救办法,臭虫以及解决方案(第二部分)
  6. CSS Hackz Series: Targeting and Filtering Internet Explorer 7

两个不太常用的 CSS Hack

1、仅 Safari 和 Opera 识别的 Hack

@media all and (min-width: 0px) {

/* Safari and Opera  rules here */

}

或者

@media screen and (-webkit-min-device-pixel-ratio:0) {

/* Safari and Opera rules here */

}

注:这里所指代的 Safari 和 Opera 一般为最新版本。

2、仅 Firefox 3 和 IE7 识别的 Hack

selector, x:-moz-any-link, x:default {

/* Firefox 3  and IE7 rules here */

}

注:由于 Firefox 2 和 Firefox 3 共存,且两个版本对 CSS 的解析有部分不一致,或许用得着这个 Hack 。

  评论这张
 
阅读(48)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017