Fatal编程技术网
  • html/
  • Html 可以采取哪些步骤来避免跨浏览器兼容性问题？

Html 可以采取哪些步骤来避免跨浏览器兼容性问题？

html css

Html 可以采取哪些步骤来避免跨浏览器兼容性问题？,html,css,cross-browser,Html,Css,Cross Browser,最近，我一直在与以下问题作斗争：奇怪的表格边框/边距、div对齐、定位问题，而且我在支持internetexplorer6时遇到了一个彻头彻尾的噩梦。我知道很多像我一样的人都被迫支持IE6-IE8、Web工具包和基于Mozilla的浏览器 我的问题是： 在跨多个浏览器进行开发以节省时间时，您在开发之前使用的重要规则是什么？ 如何防止自己编写不兼容的标签？ 避免黑客攻击代码的最佳方法是什么？ 你在哪里找到关于浏览器兼容性的研究，你使用过什么工具吗？ 最后，你什么时候过线/在哪里画线？ 我说，除了坚

最近，我一直在与以下问题作斗争：奇怪的表格边框/边距、div对齐、定位问题，而且我在支持internetexplorer6时遇到了一个彻头彻尾的噩梦。我知道很多像我一样的人都被迫支持IE6-IE8、Web工具包和基于Mozilla的浏览器

我的问题是：

  • 在跨多个浏览器进行开发以节省时间时，您在开发之前使用的重要规则是什么？
  • 如何防止自己编写不兼容的标签？
  • 避免黑客攻击代码的最佳方法是什么？
  • 你在哪里找到关于浏览器兼容性的研究，你使用过什么工具吗？
  • 最后，你什么时候过线/在哪里画线？
    • 我说，除了坚持基本原则，你没有什么可以做的：

    • 符合代码标准的HTML
    • 尽早验证，经常验证
    • 对于Javascript，请使用类似、或的框架
    • 选择一个您首先优化的“主浏览器”
    在每个项目中，都会有很多问题，但如果你坚持这些观点，就不会有太多问题

    我发现构建100%W3C有效代码非常有用。这并不是因为它很重要——W3C验证器所抱怨的很多东西在现实世界的浏览器中都不会有任何区别——而是因为能够运行验证，并获得批准，并且知道这一切都很好，这是非常有帮助的

    要同时测试多个IE实例，可以使用。它不是完美的——例如，有条件的注释在其中不起作用——但在日常开发工作中大多是可用的

  • 我通常先针对Firefox（或Safari）编写代码。这通常在IE以外的浏览器中产生最好的结果。然后我点击IE8、IE7，最后点击IE6

  • 知道什么标签会给你带来麻烦，并不惜一切代价避免使用它们。这都是关于如何熟悉每个浏览器的问题

  • 不要使用黑客。使用IE条件注释。通过使用条件注释，您可以为所有其他浏览器加载一个样式表，一个用于IE8，一个用于IE7，还有一个用于IE6（如果您需要这种粒度来解决问题）。它将为您提供尽可能少的hack-i-ness的干净样式表

  • 真的没有可以跨越的界线。如果你需要兼容性，你就需要兼容性。你只是尽可能地一次一个地把你的问题慢慢记下来，直到你有了可用的东西

    • 使用像HTML4.1这样的doctype转换，使ie6在standardsmode中呈现。您还可以使用重置样式表。

    我想从符合标准的代码开始。始终首先在符合标准的浏览器（如Firefox或Safari/Chrome）中进行测试。我更喜欢Firefox的插件（如Firebug、HTTPFox和Web开发栏）。然后继续往下走（我指的是所有版本的Internet Explorer）

    尽量避免针对每个情况或站点进行临时修复，并尽可能地概括您的代码。例如，正如Justin Neesner在他的回答中所说，在IE6、7和8中使用条件注释和通用样式表可以解决大多数布局和格式问题，而无需使用（太多）黑客。您可以重用IE样式表，只需将特定于站点的代码放在其中

    使用诸如browsershots、NetRenderer或LitmusApp之类的测试平台，这样您就可以在尽可能多的浏览器版本中看到您的站点在做什么。深入研究浏览器兼容性会让你毛骨悚然，但任何像quirksmode.org这样的优秀资源都可以为你提供有关不兼容的小问题的信息，这样你就不会发疯，也不会秃顶

    至于我什么时候越过/划清界限，99%的Internet Explorer问题，如果它足够接近FF或Chrome/Safari，我就完了。几乎和艺术一样，它不是当你完成添加时，而是当你完成移除你不想看到的垃圾时；这时您就知道它已经完成了。

    使用严格兼容的HTML和CSS标记，不要使用浏览器专有的CSS扩展

    IE6并没有正确地实现CSS，因为它完全不知道盒子模型

    另一方面，IE8有一个测试套件来证明他们正确地实现了CSS 2.1的各个方面（这是其他浏览器无法做到的）

    如上所述为Firefox开发，并决定是否支持IE6和IE7。坦率地说，我不再为这些浏览器开发单独的样式表。他们没有足够的市场份额（至少在我的网站上）

    考虑到对HTML5的兴趣和对XHTML2的缺乏兴趣，严格开发HTML4.01并遵循以下实践：（在HTML4中推荐，在HTML5和XHTML1.1中需要）

  • 所有元素和属性名称必须以小写字母显示
  • 必须引用所有属性值
  • 非空元素需要结束标记
  • 不允许属性最小化
  • 在严格模式下，所有内联元素必须包含在块元素中
    • 所以我已经四处奔波了一段时间，26天后我想我已经准备好对我的发现给出一些反馈

    编码：

    首先，我发现列系统似乎减少了HTML和CSS的编写量。它们也非常跨浏览器友好。虽然有很多，但我发现最适合我的作品是：

    接下来，我发现Ruby有一个很酷的CSS扩展，名为LESS。此文件已移植到.NET，可在以下位置找到：。它易于安装，正确使用时功能强大

    Javascript可能很棘手，但我发现在JQuery等语言中避免某些选择器和快捷方式不仅可以提高应用程序的性能，而且可以减少awk