2

我有一个关于 CSS 编码实践的问题。IE 通常需要 hack 或变通方法才能使事情看起来正确，并且有两种不同的做事方式：

  1. 将所有内容放在一个大 CSS 文件中
  2. 创建两个 CSS 文件并根据用户使用的浏览器加载它

我认为第二个更有意义，但有什么理由不这样做吗？哪个更常见？

4

7 回答 7

2

反对两个 CSS 文件的唯一理由是，在您的页面第一次打开时，它会生成一个额外的 HTTP 请求。

但是，一旦浏览器缓存填充了这些文件的本地副本，这个问题就消除了。

另一方面，单独拥有 IE 样式意味着其他浏览器上的用户不会加载它们。此外，主要样式和 hacks 之间有明显的区别，这意味着随着 IE9 的采用，您将能够通过删除该文件而不是修改主 CSS 文件轻松地弃用 hacks CSS .

于 2010-11-05T02:54:01.180 回答
2

作为所有项目的标准，我的偏好是使用一个 CSS 文件，以便以后更容易管理和修改（也只有一个 HTTP 请求）。然后使用条件来更改正文类。

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> 
<!--[if IE 7 ]>    <body class="ie7"> <![endif]--> 
<!--[if IE 8 ]>    <body class="ie8"> <![endif]--> 
<!--[if IE 9 ]>    <body class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

不确定这有多常见，但它也用于HTML5Boilerplate

于 2010-11-05T02:56:40.380 回答
1

我认为没有理由不做第二个。像这样的表达式<!--[if IE]>值得确保在使用非ie浏览器时加载正确的css并节省带宽。

于 2010-11-05T02:49:36.877 回答
1

可以为单个样式表提出的唯一论点是减少一个 HTTP 请求。鉴于平均而言，60% 的网络流量将来自 IE 用户，这并不是一个微不足道的影响。

然而，像 Holly Hack 这样的 hack 非常丑陋，并且不能保证有效，而且由于样式表被缓存，影响不应该像它应该的那样显着。条件注释是一种可接受的做法，应该用于解决 IE 问题。没有理由只为标准兼容和非标准投诉浏览器加载两个完全独立的样式表 - 覆盖少数有问题的属性就足够了。

或者，也可以使用 Javascript 解决方案（例如 IE7.js）来实现相同的效果。

于 2010-11-05T02:52:48.927 回答
1

我使用任何一个，它只取决于需要多少更改才能使页面在 IE 中看起来正确。

如果这是一个很小的变化，比如 IE 中的元素需要是 500 像素而不是 480 像素，那么我将在我的样式表中使用一种解决方法。

但是，如果有很多更改，我会使用条件注释来加载单独的样式表（如果它是 IE）——但是我没有相同样式表的两个副本，一个为其他浏览器编码，一个为 IE 编码，我有它始终加载我的主样式表，然后在需要时加载 IE 样式表并仅更改它需要的元素（因此样式表中没有必要的重复以减少文件大小）

基本上，我是如何做到的：

有几个元素需要改变：坚持解决方法

很多元素需要改变：使用条件注释

于 2010-11-05T02:53:50.860 回答
0

您可以在没有浏览器“黑客”的情况下让事情正常工作。

尽可能避免使用特定于浏览器的 CSS。对于旧版本的 IE，我更喜欢使用条件注释<--[if IE...]> ... <[endif]-->。

我知道他们向服务器创建了另一个请求，但我认为任何愚蠢到使用过时版本的 ie（6 或更少）的人都不值得花几毫秒来下载另一个样式表。这也使我可以集中修复。

首先使用符合标准的代码，然后解决不符合标准的浏览器的任何问题，但仅在绝对必要时。

于 2010-11-05T03:27:22.987 回答
0

放入 IE CSS 文件，这正是您在 IE 上修复布局所需要的，而不是一个全新的（可能是重复的）样式表。

我还建议将它用于导入 javascript，例如使 HTML5 元素工作的快速脚本（如果我没记错的话，我在 Remy Sharp 的 whatwg 示例中看到了这个）。

于 2010-11-05T03:32:36.217 回答