IE 的替代 CSS 表？
我有一个关于 CSS 编码实践的问题。 IE 通常需要黑客或解决方法才能让事情看起来正确，并且有两种不同的方法：
- 将所有内容放入一个大 CSS 文件中
- 创建两个 CSS 文件并根据用户正在使用的浏览器加载它
我正在考虑第二个更有意义，但是有什么理由不这样做呢？哪个更常见？
I have a question about CSS coding practices. IE often requires hacks or workarounds to get things looking right, and there are two different ways of doing things:
- Put everything in one big CSS file
- Create two CSS files and have it load depending on the browser that the user is using
I'm thinking the second one makes more sense, but is there any reason not to do this? Which is more common?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
反对两个 CSS 文件的唯一论点是，第一次打开页面时，它会生成一个额外的 HTTP 请求。
然而，一旦浏览器缓存填充了这些文件的本地副本，这个问题就消失了。
另一方面，单独拥有 IE 样式意味着其他浏览器上的用户不会加载它们。此外，主要样式和 hacks 之间有明显的分离，这意味着随着 IE9 的采用，您将能够通过删除该文件而不是修改主 CSS 文件来轻松地弃用 hacks CSS 。
The only argument against two CSS files would be that on first open of your page it'll generate one extra HTTP request.
However, once the browser cache is populated with the local copy of these files, this concern is removed.
On the other hand, having IE styles separately means users on other browsers won't load them. Also, there's clear separation between the main styles, and the hacks, which means that with the adoption of IE9 you will be in a position to deprecate the hacks CSS easily down the road by just removing that file, instead of modifying the main CSS file.
作为所有项目的标准，我的偏好是使用一个 CSS 文件，这样以后更容易管理和修改（也只有一个 HTTP 请求）。然后使用条件来更改主体类。
不确定这有多常见，但它也在 HTML5Boilerplate 中使用
My Preference as a standard for all projects is to use one CSS file so it is easier to manage and modify later (also only one HTTP request). Then use conditionals to change the body class.
Not sure how common this is but it is also used in HTML5Boilerplate
我认为没有理由不做第二个。像
I think there are no reason to not do second one. Expression like
<!--[if IE]>is worth to make sure that proper css is loaded and save bandwidth when non-ie browser is used.对于单个样式表可以提出的唯一论据是减少一个 HTTP 请求。鉴于平均 60% 的网络流量将由 IE 用户产生，这并不是一个微不足道的影响。
然而，像 Holly Hack 这样的黑客攻击非常丑陋，并且不能保证有效，而且由于样式表被缓存，影响应该不会那么严重。条件注释是一种可以接受的做法，应该用于解决 IE 问题。没有理由只为符合标准和非标准的浏览器加载两个完全独立的样式表 - 覆盖几个有问题的属性就足够了。
或者，也可以使用 Javascript 解决方案（例如 IE7.js）来达到相同的效果。
The only argument that can be made for a single stylesheet is the reduction of one HTTP request. Given that on average, 60% of web traffic will be made out of IE users, that's not an insignificant impact.
However, hacks like the Holly Hack are just plain ugly and are not guaranteed to work, and that since stylesheets are cached, the impact should not be as significant as it would be. Conditional comments are an acceptable practice and should be used to work around IE problems. There's no reason to load two entirely separate stylesheets just for standard compliant and non-standard complaint browsers - overriding the few problematic properties should be enough.
Alternatively, a Javascript solution, such as IE7.js, can also be used for the same effect.
我使用其中任何一个，这仅取决于需要进行多少更改才能使页面在 IE 中看起来正确。
如果这是一个小变化，比如元素在 IE 中需要为 500 像素而不是 480 像素，那么我将在样式表中使用解决方法。
但是，如果有大量更改，我会使用条件注释来加载单独的样式表（如果是 IE） - 但这样我就没有相同样式表的两份副本，一份为其他浏览器编码，一份为 IE 编码，我有它始终加载我的主样式表，然后在需要时加载 IE 样式表，并仅更改它需要的元素（因此样式表中没有必要的重复项以减少文件大小）
基本上，我的做法是：
需要几个元素改变：坚持使用变通方法
很多元素需要改变：使用条件注释
I use either, it just depends on how much of a change is required to make the page look right in IE.
If it's a small change like the element needs to be 500px in IE rather than 480px than I'll use a workaround in my stylesheet.
But if there are numerous changes I go with the conditional comments to load a separate stylesheet if it's IE - but with this I don't have two copies of the same stylesheet, one coded for other browsers and one coded for IE, I have it ALWAYS load my main stylesheet, then have the IE stylesheet load if needed and alter only the elements it needs to (So no necessary duplicates in the stylesheet as to cut down on filesize)
Basically, how I do it is:
A couple of elements need changing: stick with workarounds
A lot of elements need changing: use conditional comments
您也许可以在没有浏览器“黑客”的情况下让一切正常工作。
尽可能避免使用特定于浏览器的 CSS。对于旧版本的 IE，我更喜欢使用条件注释
<--[if IE...]> ... <[endif]-->。我知道他们向服务器创建了另一个请求，但我的观点是，任何愚蠢到使用过时版本的 ie（6 或更少）的人都不值得花几毫秒来下载其他样式表。这也使我能够集中修复。
首先使用符合标准的代码，然后修复不兼容浏览器的任何问题，但仅在绝对必要时才这样做。
You may be able to get things working right without browser "hacks".
Wherever possible, avoid using browser-specific CSS. For older versions of IE, I prefer to use conditional comments
<--[if IE...]> ... <[endif]-->.I know they create another request to the server, but my opinion is that anyone who is foolish enough to be using an outdated version of ie (6 or less) isn't deserving of the couple milliseconds it would take to download the other stylesheet. This also allows me to centralize the fixes.
Use standards-compliant code first, then fix any issues for non-compliant browsers, but only when absolutely necessary.
放入 IE CSS 文件中，只是修复 IE 上的布局所需的内容，而不是全新的（可能是重复的）样式表。
我还推荐用这个来导入 javascript，就像一个让 HTML5 元素工作的快速脚本（如果我没记错的话，我在 Whatwg 上的 Remy Sharp 示例中看到了这个脚本）。
Put in the IE CSS file, just what you need to fix layouts on IE, not a completely new (and maybe duplicate) stylesheet.
I also recommend this for importing javascript, like a quick script to make HTML5 elements work (this one I saw on Remy Sharp's sample on whatwg if I'm not wrong).