7

是否有一个“好的”干净的 CSS hack 列表，它们肯定是面向未来的？

例如，zoom:1它是安全的，只要它只提供给 IE，并且你记得它就在那里。使用子选择器的常见技巧并不安全，因为 IE7 支持它们。使用height:1%感觉很脏（但那可能只是我）。

我知道ie7-js，所以 IE6 的错误并不让我担心。另外，我不是在寻找宗教辩论，只是寻找来源。

感谢您的回复 - 我选择了具有最佳来源的答案作为答案。

也感谢使用单独的 CSS 文件的建议，或者不用担心。我完全同意你的看法，对我来说，这些都是给定的。但是当遇到布局问题时，我想要一个安全的修复程序，将我不得不在 $IE 或 $FF + 1 中重新审视问题的风险降到最低。抱歉，我没有说得更清楚。

4

12 回答 12

10

对于大多数 IE 错误，我认为您最好在指向浏览器特定样式表的链接周围使用条件注释。它倾向于使事情保持整洁，并且非常自我记录。

于 2009-02-02T18:29:22.960 回答
4

这是一个记录良好且经过良好测试的浏览器错误的好地方，黑客允许您解决它们：

http://www.positioniseverything.net/

于 2009-02-02T18:25:34.343 回答
4

对于涉及 CSS 和跨浏览器兼容性的问题，我经常使用 Peter-Paul Koch 的“ QuirksMode ”网站。他倾向于对特定于浏览器的方法不屑一顾，但他确实有一个关于CSS Hacks的页面。

于 2009-02-02T18:33:22.190 回答
3

为 Yahoo Performance 团队工作的Nicole Sullivan (AKA Stubbornella ) 在The 7 Habits for Exceptional Perf中建议您应该使用 CSS underscore hack 来修补 IE6 错误，因为：

  • 黑客应该很少见。
  • 如果您只有 5-6 次 hack（这已经很多了），那么将它们放在外部文件中从而将其与其上下文分开是没有意义的。
  • 额外的文件会导致性能损失（雅虎最佳实践，规则 1）。

但是应该注意，这不是有效的 CSS。

于 2009-02-02T19:38:03.073 回答
2

没有像干净/可接受的 [css] hack 这样的东西 - 总是按照标准编写代码，然后使用浏览器+版本特定的样式表来进行任何使事情正常工作所需的 hack。

例如：
default.css
default.ie6-fix.css
default.ie7-fix.css
default.ff2-fix.css
等

然后，当发布新版本的浏览器时，复制以前版本的 hack 并删除不再适用的位（并在必要时添加新位）。

（使用 IE 的条件注释和其他浏览器的用户代理嗅探加载单个样式表。）

于 2009-02-02T18:59:30.140 回答
1

用于 IE6 的 Underscore-hack 效果很好，例如。

min-height:50px;
_height:50px;

它不需要将内容脱离上下文移动到新的 css 文件中，只有 IE6 可以获取它们，如果您决定停止支持 IE6，它们很容易被过滤掉。它们也非常小，不会让你的 CSS 变得那么混乱。

于 2009-02-02T18:26:14.590 回答
1

修改您的 CSS 以获得特定于浏览器的支持永远不会出错 - 只要您可以轻松地包含它。正如您会注意到的，符合标准的浏览器，*咳*除MSIE 之外的所有内容，都不会在未来的版本中中断。新的 W3C 标准也不会破坏以前的标准，它们通常最多弃用或扩展以前的标准。

人们提到了非常适合处理 IE 的条件注释。但是您需要更多的东西来处理所有浏览器（移动、壁虎、webkit、opera 等）。通常，您将解析传入的请求标头以从 User-Agent 参数中获取浏览器类型和版本。基于此，您可以开始加载 CSS 文件。

我相信我们大多数人的做法是：

  • 首先开发一个符合标准的浏览器（我们以 FF 为例）
  • 一旦 CSS 完成，您就可以为 IE 提供支持（这可以通过条件注释轻松完成，如前所述）
    • 首先创建一个 CSS 文件，它将为 IE6 和以下任何其他版本微调所有内容
    • 然后创建一个 CSS 文件来处理 IE7 的所有内容
    • 最后，创建一个 CSS 文件来处理 IE8 及更高版本的所有内容
      • IE9 发布后，确保将 IE8+ 处理设置为特定于 IE8，并创建一个包含所需修复的 IE9+ CSS 文件
  • 最后，为 webkit 修复创建一个额外的 CSS 文件
    • 如果需要，您还可以创建其他文件以专门针对 Chrome 或 Safari（如果需要）

关于特定于浏览器的 CSS 实现，我通常将所有这些组合到我的主 css 文件中（如果需要，您可以轻松地搜索它们并在一个文档中替换它们）。所以如果某些东西必须是透明的，我会在同一个块中设置不透明度和过滤器（MSIE）。浏览器只是忽略他们不支持的实现，所以你的安全。我倾向于避免的具体实现是自定义实现（嘿，我喜欢 W3C 上面的 -moz 框，但我只是不想依赖它）。

与 CSS 继承和覆盖一样，您不必重新定义每个 CSS 文件中的所有 CSS 声明和定义。每个连续加载的 CSS 文件应该只包含修复所需的选择器和特定定义，没有其他内容。

你最终得到的是你的（巨大的）主 css 文件和其他文件，每个文件包含几行，用于特定的浏览器修复 - 总结起来并不是很难维护和跟踪。这是个人喜好，您的基本 css 文件将基于哪个浏览器，但通常您将定位一个浏览器，该浏览器将为其他浏览器产生最少的问题（所以是的，为 IE6 开发将是一个非常糟糕的决定观点）。

与往常一样，遵循良好实践，对每个类的选择器和细节以及使用框架保持务实和细致，这将引导你走上善意的道路，而很少需要修复。除非您想以无序无意义的混乱结束，否则结构化您的 CSS 文件是一个巨大的优势。

于 2009-02-02T19:30:13.090 回答
1

Centricle有一个很好的 CSS hack 列表及其兼容性。

我不认为你会找到一个未来证明的黑客列表，因为知道人们可以知道接下来将在 IE 中实现什么愚蠢的事情。

于 2009-02-02T22:14:24.553 回答
1

这篇文章很好地总结了 CSS hacks：http ://www.webdevout.net/css-hacks

于 2009-12-21T00:16:20.610 回答
1

这是一个非常稳定的过滤器列表：

/* Opera */
.dude:read-only { color: green; } 

/* IE6/IE7 */
@media, 
  { 
  .dude { color: silver;} 
  }

/* IE8  \0 */
@media all\0 
  { 
  .dude { color: brown; } 
  }

/* IE9 monochrome and \9 */
@media all and (monochrome: 0) 
  { 
  .dude { color: pink\9; } 
  }

/* Webkit */
* > /**/ .dude, x:-webkit-any-link { color:red; }
    /* 
    * > /**/ 
    /* hides from IE7; remove if unneeded */


/* Firefox */
@-moz-document url-prefix() 
  { 
  .dude { color: green; }
  }
于 2012-01-09T19:49:48.880 回答
0

在定义规则时，我发现允许发生自然退化很好，例如，在 CSS3 中支持 RGBA 颜色模型，但在 CSS2 中没有，所以我发现自己在做：

 background-color: #FF0000; 
 background-color: rgba( 255,0,0, 50% );

因此，当后面的规则在不支持它的旧浏览器上失败时，它将降级为先前定义的样式。

于 2009-02-02T22:09:01.363 回答
0

我更喜欢Hiroki Chalfant 描述的全局条件注释技术；

我发现将面向 IE 的规则与面向标准的规则并排保存在一个有效的样式表中很有帮助。

于 2009-02-02T22:16:11.273 回答