IE8 的 noscript 标签 BugAugust 13, 2009

“没 Javascript 就会死”的页面通常都会加入 noscript 标签用于提示用户开启脚本支持。然而在 IE8 下，如果在 noscript 标签上设置了 background-color 或者 border 样式，则无论脚本是否开启 IE8 还是会将其显示（还只是显示轮廓，并不显示内容）。

期前也碰到过这样的问题，不过当时 IE8 处于 RC 中，所以我直接使用脚本将其 display:none; 绕过了这个问题。今天又在 positioniseverything.net 上看见了这个 Bug，测试了下 Win7 RTM 上的正式版 IE8 ，发现还是存在这一问题，Sucks~

目前能想到的解决方案就是不要在 noscript 直接定义样式，可以其内部包含个 div 等块元素控制其具体样式。

IE8 正式版本推出将近半年，Buglist 也越来越完善，不知道这是件好事还是件坏事 :^(

-- EOF --

在 Explorer6 下调试 CSS（草译）November 8, 2008

原文连接在这里，主要介绍原作者的针对 Explorer6 调试 CSS 的一些经验。不过在我个人看来，这也是一般性的 CSS 调试方法。

防患于未然

坦白的讲，我每天都会话很多时间用于调试 Explorer6 的 CSS 问题上。下面是一些小 Tips 可以确保 Explorer6 最大限度的返回你期望的效果。不幸的是，并不是每个人都知道它们（译注：作者有些“危言耸听”）。

重置默认样式

重置默认样式可以最大限度的避免浏览器差异，最简单的样式重置通常可以这样写

* {
    margin: 0;
    padding: 0;
}

如果你觉得这样“太过于简单”，可以参考 YUI Reset 和 Eric Meyer's Reset。

不要在同一元素上同时声明 margin/padding 的宽度

由于 Explorer6 糟糕的盒模型，你必须要万分小心。如果你需要将一元素设置了宽度，注意避免再将其上设定margin、padding（左边或者右边）。我会在其上再包裹一层元素，比如 <p>、<ul>、<table>、<hr> 这样的标签。

在大多数情况下，设计师会统一同一种元素的样式，比如段落的内间距（padding）统一为 8px 到 20px（通常为 10px）

p {
    padding: 0 10px;
}

这是个非常好的定义。

另外：我一直使用像素（pixels）作为 margin 和 padding 的单位，因为如果使用 em，那么可能在使用不同的字体造成不同的宽度差异。

校验 XHTML、HTML

我已经好几次遇到这样的问题，在 Firefox 和 Safari 显示完好的页面，却在 Explorer6 下显得惨不忍睹。如果 Explorer7 也出现了这样的问题，那可能是遗失了“<”或者“>”之故。为了些可预见性的问题，其他浏览器都会注意这个问题，唯独 Explorer 。

我经常使用 Firefox 的 HTML validator 插件验证页面代码。

保持清除浮动

总会有页面要将某个元素浮动起来，如果是定宽的那么还好办。如果是不定宽度的，那么要清除下浮动 -- 毕竟其他元素不一定都是浮动的。总之，时刻记得清除浮动是个好的习惯（译注：也可以参看我以前的文章）。

调试的技巧

虽然有多年针对 Explorer6 的 CSS 调试经验，一些常见的问题我知道如何去解决，但真的碰到很头痛的问题时，那时我通常会这样解决

打开电脑，载入 Explorer6 （译注：废话 -_-!）
确保安装了 IE Accessibility 工具条
点击工具条上的“编辑 CSS”
然后我开始“变魔术”

寻找错误

设定背景色

我经常会在指定的大块元素上设定个背景色

#content {
    background-color: red;
}

#sidebar {
    background-color:blue;
}

这能让我知道是哪块元素出了问题（译注：我喜欢用“red”高亮，因为好打而且显眼）。

隐藏元素

然后开始逐级的隐藏该块元素中的内容，首先是最大的块

#sidebar {
   display: none;
}

如果问题消失了，那么再逐级在块中寻找出问题的元素，比如

#sidebar .sub-item {
    display: none;
}

或者

#sidebar .sub-item .sub-sub-item {
    display: none;
}

使用这一方法，通常就能精确的定位哪个元素造成的问题（按照经验通常是 <div> 或者是 <p>）。

寻找解决方案

Explorer6 是头“烈马”，它会按照自己的规则去渲染 CSS 。当找到对应的元素后，下面有些经验式的解决方案可以参考一下（保持原作、顺便偷懒就不翻译了）

#sidebar .sub-item .sub-subitem {
    /* try setting this if it’s not already set - it sometimes works wonders */
    position: relative;

    /* display: inline often fixes the double margin float bug and */
    display: inline;
             
    /* Sometimes this just fixes problems - no idea why */
    display: inline-block;

    /* margin can be a killer so take it off completely see if the problem goes away */
    margin: 0;

    /* same as margin */
    padding: 0;

    /* Sometimes IE6 hates background colours not being declared */
    background-color: transparent;

    /* can sometimes stop columns too wide from breaking a layout */
    overflow: hidden;

    /* Sometimes forces hasLayout and fixes things */
    zoom: 1;
}

我经常会碰到改变它的 margin 和 display 就能解决问题。然后我会使用 Google 搜索网上是否有相应的 Bug 记录。

解决问题

当我找到解决该问题的办法以后，通常我会将其放到名为 ie6.css 文件中，然后只让 Explorer6 载入该 CSS 。当然，要确定该样式会覆盖原先定义的样式。

译注：当然也可以使用 CSS Hacks，但不推荐这样做，原因之一是要“保持 CSS 简单”。

// 鲜果认领 BANGD5F9111B31CF304E38747370XIANGUO

@import vs linkSeptember 25, 2008

对于 CSS 的载入方式，在这里咬文嚼字下。这篇主要探讨 CSS 的两种载入方式：@import 和 link 元素间的差异。

link 是在 (X)HTML 文档中的语义是“页面资源”（当然也会包括 CSS），而 @import 只是 CSS2.1 的语句。

使用 @import 可以使各 CSS 文件间相互嵌套。在 Explorer5.x 时代，同时也是浏览器间判断是否支持 CSS2.1 的一个方法。

其实，我们最关注的是 @import 和 link 两种不同的 CSS 载入方式的性能问题。先写了两个简单的脚本，让 CSS 文件延时 5 中载入，可以在各浏览器下看看结果使用 @import 使用 link。

可以看见，Exploer 系列在使用 @import 方式时，会先载入文档，然后再载入样式；而在其他浏览器以及其他情况下，都需要等待样式载入完毕以后统一渲染。

总结下我个人的看法。我个人倾向于使用 link 方式，主要是下面的几个原因

CSS 文件也是页面资源的一部分（更佳的语义）
没有各浏览器间的载入分歧
便于 Javascript 操作（link 是 HTML 结构的一部分，而 @import 载入的只能操作 style 节点）

当然，应用 @import 的场合也很多，比如在无法更改页面结构、或者是需要统一的 CSS 入口的情况下等。

参考阅读

Gracecode.com