2008.08 17

搞定IE的最重要CSS技巧

标签: , ,
Featured, 资源共享

google

众所周知道，IE向来是我们在制作网页时最难搞定的对手。但又迫于其用户群数量之多，我们不得不想法设法搞定它。下面，将介绍的将是利用其特点而被发现/创造出来的CSS技巧。让你轻松搞定这个难对付的家伙。

  1. IE注释：最安全的HACK IE的途径

    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]-->

    这应该是我最常用的方法了，一般情况下，我们现在已经不用考虑IE5或者以下的浏览器了，这个注释让我们可以轻松HACK IE，并且它是最安全的方法，因为别的浏览器不会显示/识别它（这里应该感谢微软的细心，即使他精粗心在先）。

    至于IE8 beta，以其为主浏览器的用户算起来应该不到K级，也暂时不是我们应该搞定的对象（当然，搞定它是最好不过的事）。或者我们应该把希望放在他正式版对CSS完美的支持，而现在我们把最重要的放在搞定IE6
    /IE7，区分它们，我最常用的是下面的代码：

    #forieothers{...} // 用这个搞定IE7
    *html #forie6{…} // 当然，这是写给IE6的

    而你需要注意的就是，别把它们的顺序写倒了，因为#forieothers这个是会被IE6看到的，而根据CSS书写顺序的优先性，应该把让*html #forie6写在后面，让浏览器最终显示它，但IE7又看不到。

  2. 让IE6支持PNG透明图片

    #regular_logo
    {
    background:url(‘test.png’); width:150px; height:55px;
    }
    /* \ */
    * html #regular_logo
    {
    background:none;
    float:left;
    width:150px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’test.
    png’, sizingMethod=’scale’);
    }
    /* */

    这并不是我喜欢的方法，不过，或许你会喜欢。当然，有时候，我们导出GIF图片的时候，其效果和质量都可能不是很好，搞定PNG或许就是为这个而做的吧。也可能是由于自己并不是画图的高手，所以，比较少用。

  3. 让IE6支持min-width/max-width

    #container
    {
    min-width: 600px;
    max-width: 1200px;
    width:expression(document.body.clientWidth < 600? "600px" :
    document.body.clientWidth > 1200? "1200px" : "auto");
    }

    这应该是非常重要的技巧，也是比较常用的。就像，你以前可能用了太大的图片，但现在又想用一个栏比较小的主题，这时，这个方法就显得异常重要。抑或是，如果你想创建一个流体布局，这个代码对你来说是必不可少的。

当然，这三个并不能让你搞定所有IE的问题。不过，这应该是最重要的。IE注释通常被CSS新手忽略，而IE6显示透明PNG和IE6支持最小/最大宽度是难点。好吧，我想，看到这里，或许你已经学会了，或者，至少知道这是解决方法。但或许还有一句话你应该记住：少骂IE，完善自己！

收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »
首页 » Featured, 资源共享 »

39

  1. 2008.08.17 10:26 pm
    李普曼(visit): [回复]

    不过，IE6\7\8，相信以后还有9、10之类的，每一次出来新的，显示的状况都会不一样，都累的网站主们一直在调啊调的……

  2. 2008.08.17 10:37 pm
    Leewings(visit): [回复]

    IE6….png很麻烦…我是输出gif的“`
    IE7就没有这个问题了吧…

  3. 2008.08.17 10:50 pm
    Yacca(visit): [回复]

    我是这样搞定ie8滴…干脆当他不存在.

  4. 2008.08.17 10:50 pm
    Yacca(visit): [回复]

    meta http-equiv=”X-UA-Compatible” content=”IE=7″

    竟然被过滤了…-.-

  5. 2008.08.18 3:36 am
    MY-Hou(visit): [回复]

    万恶的IE、可爱的sofish

    现在一切firefox为先

  6. 2008.08.18 9:08 am
    stephen(visit): [回复]

    IE8的推广很失败，没有FireFox3那样风风火火的来信～～
    我的博客主题暂时在IE6下还是蛮可以的，不存在什么问题^_^

  7. 2008.08.18 9:28 am
    Poshi(visit): [回复]

    最大的问题出在,很多中国人只会用以前的XP盘装系统,而他们压根不明白IE6跟IE7有什么不同~~~

  8. 2008.08.18 10:05 am
    NIPAO(visit): [回复]

    其实IE的兼容性是非常好，如果没有什么必要最好不要用什么hack之类的，其实网页的结构排好，用CSS很容易控制并兼容FF IE6 IE7。

    PS：其实hack是做web最忌讳的东西

  9. 2008.08.18 10:23 am
    sofish(visit): [回复]

    但结构再好也不能实现PNG透明¤,¤…

  10. 2008.08.18 1:41 pm
    zEUS.(visit): [回复]

    哈哈，我需要最后一个～

  11. 2008.08.18 1:48 pm
    行者自若(visit): [回复]

    学习中~

  12. 2008.08.18 4:24 pm
    凯尔(visit): [回复]

    IE7经常不需要Hack，所以用《!–[if lt IE 7]》，或者《!–[if lte IE 6]》要更多一些

    (lt = less than, lte = less than or equal to, gt, gte and so forth)

  13. 2008.08.18 4:25 pm
    凯尔(visit): [回复]

    另外说一下，IE8的CSS解释也很烂，ACID3得分也很funny……

  14. 2008.08.18 7:41 pm
    花果山寨(visit): [回复]

    最后那一句说得好：完善自己为上策！

  15. 2008.08.18 10:47 pm
    wantfee(visit): [回复]

    我就说每次用ie6我的logo都看不到了。

  16. 2008.08.18 10:48 pm
    wantfee(visit): [回复]

    还是要好好学习css.

  17. 2008.08.19 8:01 am
    JAY(visit): [回复]

    怎么不想骂IE，那个PNG滤镜里面的图像路径就是相对当前页面而不是CSS文件的，还不支持平铺…

    那个expression也会经常搞死浏览器…

  18. 2008.08.19 9:41 am
    凯尔(visit): [回复]

    JAY说得很对，所以Sofish在上面需要说明一下。

    另外expression还有其他在CSS中用的js脚本的确很容易搞死浏览器，特别是容易让IE7出问题，以前就和JAY讨论过这个问题。

    不支持平铺，另外在用了PNG滤镜的层中，如果还有另外的子对象，很容易失去作用（鼠标相应，超链接）。

    也就是说，有些效果，用IE6就是很难实现的。我要做的，就是trash IE6……

  19. 2008.08.19 9:44 am
    小墨(visit): [回复]

    ie8的beta1用过一次 很不稳定
    就卸了

  20. 2008.08.19 9:46 am
    凯尔(visit): [回复]

    完善自己很重要，但是另外，我仍然会骂IE6，特别作为非商业化的Web design，应该联合起来，抵制IE6

    http://www.savethedevelopers.org/

  21. 2008.08.19 10:55 pm
    陌路阑珊(visit): [回复]

    ie，唉

  22. 2008.08.19 11:09 pm
    岛上有只猫(visit): [回复]

    其实IE还是不错的 虽然捆绑 但它这样的行为的确方便了很多上网的人 对于网页设计师则是另外一回事了

    这个ie css技巧不错哦···正在复习css呢

  23. 2008.08.19 11:16 pm
    bssn(visit): [回复]

    min width这个我那会用你的这个办法一直搞不定。后来找到一个通过js控制使ie支持min width属性的东西。
    http://www.doxdesk.com/software/js/minmax.html
    到这里看下，呵呵。

  24. 2008.08.20 8:49 pm
    sofish(visit): [回复]

    确实现在了这样的问题，谢谢你的提醒，我正在学习相关的资料，非常感谢你的提醒。

  25. 2008.08.20 8:50 pm
    sofish(visit): [回复]

    哈哈，谢谢啊，我需要这个！

  26. 2008.08.21 1:03 am
    Mao(visit): [回复]

    IE6用的人还是很多啊

  27. 2008.08.21 1:04 am
    Mao(visit): [回复]

    我也是用GIF…

  28. 2008.08.21 1:04 am
    Mao(visit): [回复]

    访问我博客的.用IE6的最多 =.=

  29. 2008.08.21 10:05 am
    凯尔(visit): [回复]

    GIF没有Alpha通道啊，透明图片只能显示锯齿的边缘，而不能起到半透明的效果。

    不带Alpha通道的PNG-8图片，IE6也是可以显示的。

  30. 2008.08.21 10:07 am
    凯尔(visit): [回复]

    从来不认为hack是很忌讳的东西，既然IE6存在，不用hack永远不能使用高级应用，网页的设计永远都只能停留在原本的应用上。

  31. 2008.08.22 4:15 pm
    Horse(visit): [回复]

    之前俺用的Blog模板都很头疼，在FF下明明显示得好好的，到IE下就变形了，总有侧栏或主体内容被撑到下面去。后来靠我努力地一个一个地傻乎乎地5px、10px地尝试之后，终于把它给搞定了

  32. 2008.08.28 3:34 pm
    bssn(visit): [回复]

    兼容min-width感觉还是用那个js来实现的好。这个我用着老无效，不知道咋搞的。

  33. 2008.09.01 1:25 am
    tino(visit): [回复]

    我才在学习主题方面的基础,很烦呀,我用过一个主题,除了style.css,还有ie7-style.css.

  34. 2008.09.01 3:08 am
    seeyou(visit): [回复]

    @李普曼:
    额，ie的发展正在向w3c标准靠拢，而且这个将会是趋势和必然的结果。标准只有一个，版本再更新又如何？

  35. 2008.09.02 11:58 am
    玄幻小说网(visit): [回复]

    IE8出来了，不知道是不是又要兼容一下，希望不要大动干戈

  36. 2008.11.23 5:20 pm
    David Lau(visit): [回复]

    偶的主题到现在在IE6下还有问题，还是不知道怎么弄，不知道Sofish能不能帮我看看？

  37. 2008.11.29 8:25 pm
    Jinwen(visit): [回复]

    IE6始终不好处理，现在我会担心通过的W3C认证又会让*html这种代码搞坏掉。

  38. 2009.02.25 5:28 pm
    shally(visit): [回复]

    尝试使用_min-height，结果被客户投诉说不能通过w3c校验···被迫解释一上午并且道歉···前端难做呀···

  39. 2009.02.25 5:28 pm
    shally(visit): [回复]

    ie6下的透明图片就用js来实现了·····

    1 条引用通告

  1. 随心的海 HaoHanHai\'s Blog

Additional comments powered by BackType