可接受的 CSS 修改/修复

StackOverflow https://stackoverflow.com/questions/504261

  •  21-08-2019
  •  | 
  •  

题

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

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

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

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

也感谢您建议使用单独的 CSS 文件，或者不用担心。我完全同意你的观点，对我来说，这些都是既定的。但是，当遇到布局问题时，我需要一个安全的修复程序，以最大限度地降低我必须在 $IE 或 $FF + 1 中重新审视该问题的风险。抱歉我没有说清楚。

有帮助吗？

解决方案

这是证据充分的，并经过严格测试的浏览器漏洞的好地方和黑客让你解决它们：

http://www.positioniseverything.net/

其他提示

对于大多数IE浏览器漏洞的，我认为你最好使用条件注释的周围链接到浏览器特定的样式表。它往往使事情变得非常简洁，它是相当自我记录。

我用彼得 - 保罗·科赫的“怪异模式”网站大量涉及CSS和交叉问题-browser兼容性。他倾向于不赞成特定浏览器的方法，但他确实有在 CSS黑客

妮可沙利文 （又名 司徒氏菌）谁在雅虎性能团队工作，建议 成就卓越表现的 7 个习惯 你应该使用 CSS underscore hack 来修补 IE6 的 bug，因为：

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

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

有没有这样的事情作为一种很好的清洁/可接受[CSS]破解 - 总是代码标准，然后用浏览器+版本的具体样式为使事情工作所需的任何黑客

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

然后，当浏览器新版本的发布，复制以前版本的黑客和删除不再适用的位（如果需要添加新的位）。

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

下划线劈为IE6-东西效果很好，如。 

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

它不需要搬东西断章取义成新的CSS-文件，只有IE6让他们和它们很容易过滤掉，如果你决定停止支持IE6。他们还非常小，不会搞乱你的CSS那么多。

修改 CSS 以获取特定于浏览器的支持永远不会错 - 只要您可以轻松包含它。您会注意到，符合标准的浏览器，*咳嗽*一切 除了 MSIE，永远不会与未来的版本中断。新的 W3C 标准也不会打破以前的标准，它们通常最多是废弃或扩展以前的标准。

人们提到了条件注释，这对于处理 IE 非常有用。但是您需要更多的知识来处理所有浏览器（移动、gecko、webkit、opera 等）。通常，您将解析传入的请求标头以从 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 文件是一个巨大的优势，除非你想最终得到无序无意义的混乱。

Centricle 具有CSS黑客和它们的相容性的良好的列表。

我不认为你会发现黑客，这将是面向未来的一个列表，知道一看就知道是什么愚蠢的事情将在未来的IE来实现。

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

下面是一个是非常稳定的良好过滤器列表：

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

在定义规则，我觉得很不错，让自然降解发生，例如，在CSS3存在的RGBA颜色模型的支持，但没有在CSS2，所以我觉得自己做的：

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

所以，当后来的规则失败上不支持旧的浏览器，它会降低到以前定义的样式。

我更喜欢全球条件注释通过广木查尔方特描述的技术;

我发现它有助于保持我的IE针对性的规则并排侧在一个有效的样式表与我的标准，有针对性的规则。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top