一起CSS

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

css hack

日期:2009-11-9 分类:CSS

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。

查看:2,834 评论:19 标签:

相关日志

共有 19 条评论

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved