Question

是否有一个'好'干净的CSS黑客列表，这些肯定是面向未来的？

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

我知道ie7-js，因此IE6错误并不会让我担心。此外，我不是在寻找宗教辩论，只是消息来源。

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

还要感谢您使用单独的CSS文件的建议，或者不要担心它。我完全同意你的看法，对我来说，这些都是给予的。但是当面对布局问题时，我想要一个安全的解决方案，以最大限度地降低我在IE或$ FF + 1中重新审视问题的风险。抱歉，我没有更清楚。

Answer 1

对于大多数IE错误，我认为您最好使用conditional comments围绕浏览器特定样式表的链接。它往往会让事情变得非常整洁，并且非常自我记录。

Answer 2

这是一个记录良好且经过良好测试的浏览器错误的好地方，黑客可以让你解决这些问题：

http://www.positioniseverything.net/

Answer 3

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

Answer 4

Nicole Sullivan（AKA Stubbornella ）为雅虎绩效团队工作，在The 7 Habits for Exceptional Perf中建议您应该使用CSS下划线修补IE6错误，因为：

黑客应该少之又少。
如果你只有5-6个黑客（已经很多），那么将它们放在外部文件中从而将它与上下文分开是没有意义的。
额外的文件会导致性能下降（Yahoo Best Practices, Rule 1）。

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

Answer 5

没有一个好的干净/可接受的[css] hack - 总是编写标准代码，然后使用浏览器+版本特定的样式表来完成所需的任何黑客攻击。

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

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

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

Answer 6

IE6的下划线黑客工作得很好，例如。

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

它不需要将内容移出新的css文件，只有IE6才能获取它们，如果您决定停止支持IE6，它们很容易被过滤掉。它们也非常小，并且不会使CSS混乱。

Answer 7

修改您的CSS以获得特定于浏览器的支持永远不会错 - 只要您可以轻松地包含它。正如您将注意到的那样，符合标准的浏览器，*咳嗽* 除了 MSIE之外的一切将永远不会破坏未来版本。新的W3C标准也没有违反以前的标准，它们通常最多会弃用或扩展以前的标准。

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

我相信我们大多数人这样做的方式是：

首先开发一个符合标准的浏览器（让我们以FF为例）

一旦CSS完成，你就会接受对IE的提供支持（这可以通过条件评论轻松完成，如前所述）

首先创建一个CSS文件，该文件将微调IE6和
以下任何其他版本的所有内容
然后创建一个CSS文件来处理IE7的所有内容

最后，创建一个CSS文件，它将处理IE8及更高版本的IE版本的所有内容

一旦IE9出现，请确保将IE8 +处理设置为IE8特定，并创建一个包含所需修复的IE9 + CSS文件

最后，为webkit修复创建一个额外的CSS文件

如果需要，您还可以根据需要创建其他文件以专门定位Chrome或Safari

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

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

最终你最终得到的是你的（巨大的）主要css文件和其他文件，每个文件包含几行，用于特定的浏览器修复 - 总结到一些不太难以维护和跟踪的东西。这是个人偏好你的基础css文件将基于什么浏览器，但通常你将针对一个浏览器，为其他浏览器创建最少量的问题（所以是的，开发IE6将是一个非常糟糕的决定，点）。

一如既往，遵循良好的做法，务实细致地选择每个班级和使用框架的细节，将引导您走向善良的道路，并且需要很少的修复。构建CSS文件是一个巨大的优势，除非你想要一个无序无意义的混乱。

Answer 8

Centricle有很好的CSS黑客及其兼容性列表。

我认为你不会找到将来证明的黑客名单，因为知道接下来会在IE中实施什么愚蠢的东西。

Answer 9

本文是CSS hacks的一个很好的总结：http://www.webdevout.net/css-hacks

Answer 10

这是一个非常稳定的good list过滤器：

/* 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; }
  }

Answer 11

在定义规则时，我发现允许自然降级是很好的，例如，在CSS3中支持RGBA Color模型，但CSS2中没有，所以我发现自己在做：

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

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

Answer 12

我更喜欢Hiroki Chalfant描述的global conditional comment技术;

我发现将IE目标规则与我的标准定位规则并排放在一个有效的样式表中会很有帮助。

可接受的CSS黑客/修复

12 个答案: