一起CSS

当前位置:一起CSS > CSS > 文章正文

css hack

css hack 是个很有争议的东西,一开始我也很讨厌,因为我觉得可以饶过 css hack,通过另外的方法解决问题。但是,随着工作中的不断实践,改变了我的观点,css hack 虽然不能通过 w3c 标准认证,但适当是使用很有可能会使你的 HTML 结构更紧凑、有效的减少无语义标签或带来其他好处。

在公司,电脑里的浏览器是 ie6,除了开发部和技术部外,其他部门的同事很少装其他浏览器(不过有小部分可能会升级到 ie7/ie8)。而开发部和技术虽然会装 ff,但装好之后一般不会升级,因为他们不一定是前端开发人员,他们装 ff 的目的也只是看看自己做的东西在 ff 下是否正常,所以这就导致了公司里有各个版本的 ie 和 ff 都有。其实这不是最严重的,因为我做的东西除了在 op 下可能会有些差异外,在上面所有浏览器和 sa 、ch 下都表现的很好。最严重的是之前的有些东西他们做的时候可能只考虑到 ie6,所以如果要修复的话,会把我给郁闷坏,因为我不仅要针对浏览器修复,还有可能要针对浏览器版本修复。如果是你的话,你会头疼吗?所以我收集了一些我认为是比较简单方便的 css hack,一来是自己在工作可能需要,二来算是分享吧。这些 css hack 注意顺序一起使用,能区分不同的浏览器和版本。当然,如果你没必要考虑这么复杂的情况,就挑选需要的用咯。通过实例来体现吧。

html 代码

<body>
	<p>您的浏览器是</p>
</body>

css hack 代码

p { margin:0; padding:0 55px 0 0; height:30xp; line-height:30px; font-size:14px;}
p { background:url(llq.gif) 90px -170px no-repeat;} /* all */
p,x:-moz-any-link { background:url(llq.gif) 90px -80px no-repeat;} /* for ff */
p,x:-moz-any-link,x:default { background:url(llq.gif) 90px -140px no-repeat;} /* for ff2+ */
p {[;background:url(llq.gif) 90px -260px no-repeat;]}  /* for sa/ch */
p { background:url(llq.gif) 90px -50px no-repeat\9;}  /* for ie */
*+html p { background:url(llq.gif) 90px -20px no-repeat;} /* only for ie7 */
p { _background:url(llq.gif) 90px 10px no-repeat;} /* only for ie6 */

查看Demo

因为没有找到 op10 的 css hack,所以标准的写法是给 op10 的,然后针对其他浏览器写 css hack。

另外,在修复过程中,我发现了网上流传的一个 css hack 有问题,这个 css hack 也许有很多人在用,就是[属性:值\0],有的人说这是 ie8 专用的,但我在测试过程中发现这个 css hack 除了 ie8 识别外,ff3 和 op10 也能识别(ff2 和 ff3.5 不能识别)。你可以使用对应的浏览器(如果你有的话)点击这个例子查看。

所以有些 css hack 还是尽量在多个浏览器里测试测试,以免误导别人。

注:op 代表 opera,sa 代码 safari,ch 代表 chrome。

查看:5,681 评论:19 标签:

相关日志

已经有 19 条群众意见

  1. keelii

    嗯。我现在基本没咋用hack。一般来说不太复杂的页面只要xhtml写好再用一些filter就可以搞定兼容问题了。 对话

    #1
  2. keeliikeelii

    不过话说回来,有时候一句hack可以省很多精力哈。用得适当就好。 对话

    #2
  3. anyLiv

    看见这些就头疼了,我一般就偷懒给 body 加 class 如 body.ie6 body.ff2 body.ff3 之类的,然后用子选择器,虽然代码多点,但不用记那么多东西,哈哈。 对话

    #3
  4. 青色keelii

    是的,有的时候针对 ie6 写个 hack 能避免很多麻烦。 对话

    #4
  5. 青色anyLiv

    不太明白你是怎么做的。比如 body.ie6 {属性:值} 其他浏览器不是一样识别吗。 对话

    #5
  6. anyLiv青色

    我一般偷懒用 JavaScript 或者 IE 的条件注释给 body 添加不同的 class 名称:

    http://anyliv.com/blog/1141.html

    虽然浏览器非常多版本更多,但做站不一定要求那么苛刻,做产品具只要有足够的“普适性”即可,我通常以 Firefox 3 等符合 W3C 的浏览器为标准,基本上 WebKit 和 Opera 等标准浏览器都没什么问题,完工后添加一些 IE6 的处理即可,从 CNZZ 统计 IE6 核心国内有 85% 市场而全部的 IE 有 98% 市场,剩下不到 2% 基本上都是高手了。 对话

    #6
  7. 骨头软件工作室

    已经达到忘我的境界了,呵呵 对话

    #7
  8. 大地软件

    最近有点忙,很久没有来看看了! 对话

    #8
  9. 糯米

    主题不错哦 对话

    #9
  10. Nobird

    hack是个好东西,没有谁整天拿w3c检查你的网站,但是对于浏览器绝对是第一印象。 对话

    #10
  11. 软件

    郁闷啊,我的网站因为备案问题,被空间关闭几天,居然被百度K了,哭... 对话

    #11
  12. 青色软件

    怎么个K法? 对话

    #12
  13. 青色Nobird

    一开始肯定冲着W3C去,但中间有冲突就可以考虑用 css hack,正如我上面说的:在有的的情况下用 css hack 能使结构更好、更有语义。 对话

    #13
  14. 青色糯米

    再好的东西看久了都会乏味,我又想换了。。。 对话

    #14
  15. 知道

    还是挺不错的么! 对话

    #15
  16. uoian

    hack貌似比较怕浏览器更新,呵呵。
    另外,我的链接就这样被你无情的删除了。:) 对话

    #16
  17. operafans

    opera的hack,目前找到比较可靠的是以下方法:
    /* Opera hack */
    @media all and () {
    #opera { }
    } 对话

    #17
  18. 5D开心博客

    现在浏览器版本越来越多,组做美工越来越麻烦啊 对话

    #18
  19. john

    你好,我的网站(www.johnszone.cn)文章页在ie6下错位了,怎么也解决不了。能帮忙看一下吗?谢谢 对话

    #19

我要发表意见