CSS \9 in width 属性答案

【问题标题】：CSS \9 in width propertyCSS \9 in width 属性
【发布时间】：2011-12-21 17:31:49
【问题描述】：

这是什么意思？我猜这是浏览器 hack，但我一直没能找到它到底做了什么。

width: 500px\9;

\9有什么意义？

【问题讨论】：

【解决方案1】：

\9 是 Internet Explorer 7、8 和 9 特有的“CSS hack”。

这仅仅意味着以\9; 代替; 结尾的特定CSS 行仅在IE 7、8 和9 中有效。

在你的例子中，

width: 500px\9; 表示只有在使用 IE 7、8 和 9 时才会应用 500 像素的宽度（结果与 width: 500px; 相同）。

所有其他浏览器将完全忽略width: 500px\9;，因此根本不会将width: 500px; 应用于元素。

如果你的 CSS 看起来像这样......

#myElement {
    width: 300px;
    width: 500px\9;
}

在 IE 7、8 和 9 中，结果将是 #myElement 500 像素宽，而在所有其他浏览器中，#myElement 将是 300 像素宽。

编辑：

这个答案写于 2011 年。现在应该注意的是，这个 hack 也适用于 IE 10。

【讨论】：

@jdavid.net，如果它没有破坏你的 CSS，绝对没有，AFAIK。
\0 而不是 \9 也会将其应用于 IE10
@abc123 希望他们永远不会让 IE 升级到 16 版。
根据我刚才的经验，\9 也适用于带有width 属性的 IE 10，至少在 IE 的仿真模式下是这样。仿真模式在最好的时候是错误的，所以也许这就是原因。
@davidjb，那是因为它不是真正的模拟器。它被设计为旧代码的后备。

【解决方案2】：

这是 IE9 及以下版本的 css hack

这样写：

width: 500px\9;

【讨论】：

感谢您的链接，但文章没有解释它的作用。
我们为 IE 使用 hack 有两个目的。 1) IE 不支持某些属性，例如 display:inline-block & 2) 每个浏览器都会以不同的方式呈现一些 HTML 和 css 属性。查看这篇文章blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block
检查链接也coding.smashingmagazine.com/2010/06/07/…
IE 确实支持 display: inline-block;，不好的例子。
然而，对于“宽度”属性来说，这似乎不是一个特别有用的技巧。至少不在怪癖模式之外。

【解决方案3】：

IE9 的 CSS 破解

/* Hack CSS IE9 */
.csshackie9 {color:#f00\9\0\;}

【讨论】：

【解决方案4】：

在 IE9 中设置 width 属性你只需添加这个 hack。

例如

.align {
    float:left;
    margin:5px;
    background-color:blue;
    width:65px;
    width:\9 !important;
}

【讨论】：