可接受的 CSS hacks/修复

Posted 2023-03-05

【中文标题】可接受的 CSS hacks/修复

【英文标题】：Acceptable CSS hacks/fixes

【发布时间】：2010-10-04 23:48:59

【问题描述】：

是否有一份“好的”干净的 CSS hack 列表，这些技巧肯定是面向未来的？

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

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

---

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

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

【参考方案1】：

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

【参考方案2】：

这是一个有详细记录和经过充分测试的浏览器错误的好地方，黑客可以让您解决它们：

http://www.positioniseverything.net/

【参考方案3】：

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

【讨论】：

是的，我虔诚地使用他的网站，因为最好从一开始就避免出现问题。我特别喜欢他对 CSS Hacks 的看法（奇怪的是我以前从未读过它）。

【参考方案4】：

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

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

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

【讨论】：

+1 有效性是次要问题，当后果微不足道时-fwiw，我相信取消上下文和增加请求并非微不足道

【参考方案5】：

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

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

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

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

【讨论】：

（虽然这并不是对所问问题的直接回答，但我仍然认为这是一个有效的答案）

我同意；这是一个可以接受的答案，因为问题的前提假设存在可接受的黑客攻击是无效的。

但是您依靠浏览器嗅探来做到这一点。

有一些可靠的方法可以检测浏览器，尤其是使用 IE 条件。如果您需要为大量非 IE 浏览器提供额外的样式表，那您就错了……

我遇到的问题是，它会导致布局转换修复的泛滥，使调试和测试变得更加困难。很明显，仅仅编写有效的 CSS 是不够的。不过，完全同意这是一个有效的答案。

【参考方案6】：

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

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

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

【讨论】：

下划线前缀不是有效的 CSS，所以不安全。使用 IE6 的“* html”破解。

应首先添加最小值或最大值，然后用 _height 或 _width 值覆盖...这将允许您设置最小值/最大值，然后硬编码一个最适合 IE6 的值缺少最小值/最大值。

【参考方案7】：

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

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

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

首先为一个符合标准的浏览器进行开发（我们以 FF 为例） CSS 完成后，您将接近提供对 IE 的支持（这可以通过条件 cmets 轻松完成，如前所述） 首先创建一个 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 开发将是一个非常糟糕的决定点）。

与往常一样，遵循良好实践并务实细致地选择每个类的选择器和细节以及使用框架将引导您走上善意的道路，而很少需要修复。除非您想以无序无意义的混乱结束。

【讨论】：

符合标准的浏览器可能会在未来的版本中出现问题，当存在错误或其他回归时，尤其是在很少使用的功能中。我经常遇到这种情况，真的希望所有浏览器都支持条件 cmets。

我只限于 CSS 解析。与 FF Y 的发布版本相比，在 CSS 方面，您不应该注意到在 FF X 的发布版本上呈现的差异。据我所知，W3C 从未引入任何 CSS 回归，尽管我可能是错的。

【参考方案8】：

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

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

【讨论】：

实际上是 Centricle 桌子给了我灵感。这些技术中的每一个都是定时炸弹，依赖于 不相关 解析错误允许您进行定向更改这一事实。

【参考方案9】：

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

【参考方案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; 
  

【参考方案11】：

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

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

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

【参考方案12】：

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

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

【讨论】：

很好，而且很自我记录。但是，让错误决定您的页面布局并不总是很好甚至不切实际，而且我不喜欢使用 > 来定位其他浏览器的建议。

我不会让错误支配我的布局；我为标准设计并使用条件 cmets 来提供 IE 版本特定的覆盖，其中 IE 在合规性上下降。例如#someElement someRule ... #ie6 #someElement someRule-overridden-for-ie-6

对不起，我的意思是我不喜欢 IE 会有不同的文档树。