构建跨浏览器兼容站点的时间顺序是啥？ [关闭]
Posted
技术标签:
【中文标题】构建跨浏览器兼容站点的时间顺序是啥？ [关闭]【英文标题】：What are the chronological steps in building a cross browser compatible site? [closed]构建跨浏览器兼容站点的时间顺序是什么？ [关闭] 【发布时间】：2011-05-17 14:44:20 【问题描述】：我正在处理我的第一个项目，该项目需要我担心跨浏览器的兼容性。由于这是我第一次这样做，我不知道如何去完成这个项目。我特别担心IE。我应该在更优雅的浏览器中完成我的项目，然后将其破解以在 IE 中工作，还是应该同时在两种环境中构建我的程序？
【问题讨论】：
@Anders：我怀疑你会因此而受到抨击。大多数人会简单地假设您是来自平行宇宙的访问者，其中 QuirksMode 在 Internet Explorer 列中显示的绿色比在 Safari 中显示的多。 @Anders：我真的希望你只是在拖钓...... 按时间顺序，你用时光机回去拍IE的爷爷。 【参考方案1】：有很多很棒的工具可以让您的生活更轻松，例如 您可以使用名为 blueprint 的 CSS 框架，它已经为每个特定浏览器设置了所有内容，以便您在所有浏览器中获得相同的结果。并且使用jquery 作为你的 javascript 框架确实增加了一个额外的保险，你可以让它在大多数浏览器中工作。
但请记住，世界上所有浏览器和所有版本都不存在 100% 跨浏览器兼容性。
【讨论】：
lesscss.org 和 sass-lang.com 比蓝图好得多。最后一个框架生成html，不包含span-8之类的位置css样式：类comment好多了
这只是一个建议。正如我所说，那里有很多工具，你应该使用任何你喜欢的东西并找到最容易使用的东西，我喜欢蓝图，我发现它满足了我的所有需求。
当然，但我更喜欢仅将 HTML 用于数据，而将 css 仅用于定位。并且不要混合它们：新布局只会改变 CSS，而不是 HTML。例如span-8：在更改页面布局后（仅 css 已更改），span-8 样式逻辑上变为span-2，但名称混淆和调试将比comment 更难类名。【参考方案2】：
首先将您的网站设计为在标准投诉浏览器中运行。我总是从 Firefox 开始，即使在我的公司 Intranet（每个人都使用 IE）上进行开发时也是如此。这样做会让你专注于让你的标记和 CSS 正确。这是最重要的。
需要注意的重要一点是，您需要“面向未来”您的网站，而专注于符合标准的浏览器将有助于您做到这一点。
然后，一旦您确信您的网站看起来正确（validators 是您的朋友！），请在您想要支持的 IE 版本中进行尝试。为了让你的布局在 IE 中看起来不错，我强烈建议为每个版本的 IE 使用不同的样式表，使用 conditional comments。
此外，您应该注意，许多其他人与您处于相同的情况，并且有很多可用的帮助。强制 IE 运行的一种流行方法是 ie-7.js project。
最后，请注意最常见的 IE 错误，例如：
IE6 Box Model Bug IE6透明PNG图片（我以前用过this fix）【讨论】：
伙计，你打字快。在我打字之前，你说的更多，更好。 过去我在处理 IE 方面有过很多痛苦/经验（直到 2010 年 6 月，公司图像仍然有 IE6！不是开玩笑！），所以我对这个主题有很多话要说； )【参考方案3】：我先为 Firefox 开发，然后解决 IE 漏洞。我很少“破解”它，而是找到适用于两者的东西，或者在最坏的情况下使用 IE 条件 cmets。只是一个编码器的偏好。使用 Safari 进行测试也是一个好主意。
Firefox 的两大优势是：错误控制台和 Firebug 插件。
【讨论】：
【参考方案4】：一些提示：
-
代码符合标准 - 首先确保您刚刚开发的内容在 Firefox 和 Chrome 中有效，然后在 IE 中进行验证。我通常会在 Safari 中查看它。首先确保您的标记/代码在更符合标准的浏览器中工作总是更好。
尽早验证，经常验证——你不希望你的设计在一个浏览器中看起来很完美，发现它在另一个浏览器中出现问题，发现要修复损坏的布局，你需要纠正一些无效的 HTML/ CSS，才发现现在第一个浏览器看起来不对。
渐进式增强 — 将成为您的朋友。从基础开始，使用简单的 HTML 和简单的 CSS，不使用任何 JavaScript。重复提示 #1 和 #2，然后继续进行更复杂的样式和布局。继续这个迭代过程，直到您对所有浏览器中的设计感到满意为止。只有这样，您才应该考虑使用 JavaScript 来润色网站。
经常检查每个浏览器——不要在一个单一的、兼容的浏览器（如 Firefox）中开发整个网站，然后决定在 IE 中“看看有什么问题”。如果您有一个复杂、动态的网站，那么 Internet Explorer 中可能会出现很多问题。当它们相互复合时试图破译它们是一场噩梦。
重置样式表 — 正如 @Eir 在 cmets 中提到的，找到一个好的重置样式表。虽然，他们为某些人提供了fallen out of favor，但我发现从一开始就将每个浏览器放在同一位置上会有很大帮助。
使用框架——我发现 CSS 框架太过分了，但有些人对它们发誓，所以各有各的。另一方面，一旦您进入 JavaScript 开发阶段，我强烈建议您使用 jQuery 或 MooTools。他们非常专注于规避跨浏览器的不一致。
让JSLint 伤害你的感情 — 即使在使用 JavaScript 框架时，JSLint 也会帮助你遵守某些编码标准。有些选项有点过于严格，但我保证，如果您在开发过程中经常通过此工具清理脚本，您几乎永远不会遇到那些似乎一切正常的奇怪时刻在所有浏览器中除了 IE。
还有一些很棒的工具！您应该考虑上述列表中的所有内容强制做法。以下内容可以在紧要关头为您增添趣味，但是可选的：
-
CSS Browser Selector — 你很少需要这个，但如果一切都失败了，它比只为一个浏览器使用单独的样式表要酷得多（我鄙视条件 cmets）。它基本上将类添加到您的
<html> 标记中，因此您可以在主样式表中执行以下操作：.ie7 #header /*stylese here for IE7 only*/。它支持许多操作系统上的许多浏览器。而且速度很快。
Browsershots — 没有什么能比得上真实的东西，但如果您无法安装一套浏览器，这个和other tools like it 可以提供帮助。
IE6 CSS Fixer — 我完全拒绝在 IE6 中调试我的设计。我强迫我的公司（通过与 IT 和管理层的许多令人懊恼的会议）放弃对它的支持（感谢上帝）。浪费这么多时间强迫这堆东西只会适得其反......无论如何，如果你不像我并且需要支持 IE6，这个工具可以提供帮助。
【讨论】：
【参考方案5】：噢噢噢，好问题：
这是我的看法：
-
确定您支持的浏览器。我建议按重要性排列 IE 7 + 8、FF、Chrome 和 Safari。 （仅在绝对必要时才支持 IE6！）。如果您在这里了解自己的用户群，这会有所帮助。
使用 css 重置。 不同的浏览器有不同的默认样式。 CSS 重置为您提供了一致的基础。
让您的标记尽可能简单。遵循标准（并查看 Stephen 的答案的逐步改进）。
在目标浏览器上测试每一步。这样您就可以立即纠正问题。 http://crossbrowsertesting.com/ 是最好的资源，但也有免费的截图资源。
尽可能避免黑客攻击。如今，大多数跨浏览器问题都可以在不借助 hack 的情况下解决。
遇到困难时在这里提问。如果这是您第一个处理浏览器的项目，您会因不一致而感到困惑。我们都面临这些问题，很乐意提供帮助。
请接受网页在所有浏览器中的外观并不完全相同的事实。 （再一次，请参阅渐进增强）。
祝你编码好运！
【讨论】：
【参考方案6】：理论上最好同时为所有浏览器开发，始终测试每个浏览器...
实际上，这种情况很少发生...我通常使用 Firefox 进行开发/测试。当我介绍复杂的 javascript 或 css 时，我会检查 ie...这个工具非常方便地检查所有版本... google ie tester。
通过定期检查所有浏览器，并在进行复杂更改时，确保主要功能兼容:)
此外，确保所有代码都有效不仅是一种好习惯，而且有助于识别跨浏览器问题.. google w3schools 验证器 :)
使用诸如 jquery 之类的 javascript 库也有助于提高跨浏览器的兼容性，有些甚至还带有 css 库。这些库是专为快速、可靠的功能而构建的，通常可以保证跨浏览器。
最后，在启动之前，使用启动列表检查是否一切正常：http://lite.launchlist.net/
希望所有这些都有意义并有助于您的第一个项目:)
【讨论】：
为什么不直接使用 W3C 验证器？ “w3schools 验证器”搜索链接到 w3c 验证器 :)【参考方案7】：您还应该专注于重置 css，例如 this
【讨论】：
使用 CSS 重置是一种有问题的做法，也许是个人喜好。将所有内容设置为零，然后将其再次设置为您想要的值是双重职责。只需将其设置为您想要的即可。 为什么要重置任何东西？ @Rob 不同的浏览器或用户代理具有不同的默认样式表。这使得创建像素完美的跨浏览器页面令人抓狂。如果您使用重置，它可以让您从一组一致的基本样式开始。这是一个有用的答案，不值得反对。 +1 弥补它 @Sebastian Patane Masuelli - 正如我所说，CSS 重置将所有内容设置为零，但随后您将所有内容设置为其他内容。你在做双重职责，这是浪费精力。我在重复自己。只需首先将所有内容设置为您想要的即可。以上是关于构建跨浏览器兼容站点的时间顺序是啥？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章