您当前的位置:首页 > 网页设计 > Web开发 > 正文

CSS hack 用CSS条件注释实现

【字体大小: 2009-12-03 18:10 来源: 作者: 

  这是一位52CSS.com网页的文章,提出了“CSS hack 用CSS条件注释实现”观点。我们一并看看他的感受。开始我写的DIV结构,CSS代码,感觉还很流畅,很清晰,注释说明也写得很详细。对着Firefox三张页面的初稿完成,我发现CSS文件才7KB,自己明显地进步了不少。然后我开始在IE7 IE6下作兼容性调试,那个痛苦哇!页面没有大的差错,不外乎就是页面因为宽度问题,被挤扁了,但是小小的问题,一修正起来,要写一大段代码,有些还得修改DIV结构。靠!折腾了一天,CSS文件臃肿到了17KB。IE真不是人造的。

  我这次做浏览器兼容性调试不再是使用我上次介绍的CSS HACK技术,而是新学了一招:CSS条件注释。我看到不少博客都在力荐这个方式,所以试水一下。

  总结一下:  

  1. <link href="css/css.css" rel="stylesheet" type="text/css" /> 
  2. <!--[if IE 6]> 
  3. <link rel="stylesheet" type="text/css" href="css/ie6.css" /> 
  4. <![endif]--> 
  5. <!--[if IE 7]> 
  6. <link rel="stylesheet" type="text/css" href="css/ie7.css" /> 
  7. <![endif]--> 

  说明:以上例子中,第一条是给FF看的,下面的if IE 6 if IE 7判断语句是个IE6 IE7看的。这个顺序不能随便换,因为浏览器也是从上至下解释的,后面的效果覆盖前面的。然后再在IE6 IE7单独的样式文件中针对性地写代码。

  实际上,CSS条件注释和CSS hack本质上一样,只是表现形式不同而已。条件注释把HACK代码写在了独立的CSS文件中而已。这样的优点是:CSS代码可读性强些了,更加清晰了,没有杂乱的HACK符号。缺点是:在IE6 7 单独的CSS文件中写的语句,支离破碎,以后要想修改,维护起来特别麻烦。如果你的ID CLASS命名比较规范,比较语义化,那还好点。

  总结:如果你的XHTML页面体积小,就用一般的CSS HACK方法,直接写在一个样式文件里吧。页面大了再考虑CSS条件注释。

  不知道我理解得对不对。欢迎大家在52CSS.com发表评论。慢慢体会。

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    【责任编辑:绝口不提】 标签:
    最新评论 查看所有评论
    发表评论 查看所有评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名:密码:验证码: