可接受的CSS攻击/修复

是否有一个“好的”干净的CSS黑客列表，这肯定是未来的证明

例如，

zoom:1

是安全的，只要它只提供给IE，并且您记得它就在那里。使用子选择器的常见黑客行为并不安全，因为IE7支持它们。使用

height:1%

感觉很脏（但那可能就是我）

我知道，所以IE6虫子不太让我担心。另外，我不是在寻找宗教辩论，只是寻找资料来源

---

谢谢你的回复-我已经选择了一个最好的来源作为答案

---

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

这是一个很好的地方，可以找到记录良好、经过良好测试的浏览器错误，黑客可以帮助您解决这些问题：

---

IE6的下划线hack功能非常好，例如

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

---

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

对于大多数IE bug，我认为你最好使用一个指向特定于浏览器的样式表的链接。它倾向于使事情保持整洁，并且它非常自我记录。

我经常使用Peter Paul Koch的“”网站来解决CSS和跨浏览器兼容性方面的问题。他倾向于不赞成特定于浏览器的方法，但他确实有一个页面。

没有好的干净/可接受的[css]黑客——总是按照标准编写代码，然后使用浏览器+特定于版本的样式表进行任何需要的黑客操作

例如：

default.css

default.ie6 fix.css

default.ie7 fix.css

default.ff2 fix.css

等

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

---

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

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

人们提到了有条件的评论，这对于处理IE来说是非常好的。但是对于处理所有浏览器（移动、gecko、webkit、opera等），你还需要更多的评论。通常，您将解析传入的请求头，以从用户代理参数获取浏览器类型和版本。基于此，您可以开始加载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文件是一个巨大的优势，除非你想以无序的无意义的混乱告终。

雅虎绩效团队的工作人员建议你应该使用CSS下划线黑客修补IE6漏洞，因为：

• 黑客应该很少
• 如果您只有5-6个hack（这已经足够了），那么将它们放在外部文件中，从而将其与上下文分离是没有意义的
• 额外的文件将导致性能损失（）

它是

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

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