构建跨浏览器兼容站点的时间顺序是什么?

Bab*_*ker 11 javascript css firefox internet-explorer cross-browser

我正在开发我的第一个项目,需要我担心跨浏览器的兼容性.由于这是我第一次这样做,我不知道如何完成项目.我特别担心IE.我应该在一个更优雅的浏览器中完成我的项目然后破解它在IE中工作,还是我应该同时在两个环境中构建我的程序?

wsa*_*lle 6

设计您的网站首先在标准投诉浏览器中工作.我总是从Firefox开始,即使在我公司的Intranet上开发(每个人都使用IE).这样做可以让您专注于获得标记和CSS正确.这是最重要的.

需要注意的重要一点是,您希望"未来证明"您的网站,并专注于符合标准的浏览器将帮助您做到这一点.

然后,一旦您确信您的网站看起来正确(验证者是您的朋友!),请在您要支持的IE版本中试用它.为了让您的布局在IE中看起来不错,我强烈建议您使用条件注释为每个版本的IE使用不同的样式表.

此外,您应该注意到许多其他人与您自己的情况相同,并且提供了相当多的帮助.迫使IE表现的一种流行方法是ie-7.js项目.

最后,请注意顶级IE错误,例如:


Ste*_*hen 6

一些提示:

  1. 代码到标准 - 首先确保您刚刚开发的内容适用于Firefox和Chrome,然后在IE中进行验证.我通常会在Safari中查看它.最好先确保标记/代码在更符合标准的浏览器中工作.
  2. 早期验证,经常验证 - 你不希望你的设计在一个浏览器中看起来很完美,发现它在另一个浏览器中被破坏,发现要修复破坏的布局,你需要纠正一些无效的HTML/CSS,现在才找到它第一个浏览器看起来不对.
  3. 渐进式增强 - 将成为你的朋友.使用简单的HTML和简单的CSS开始基本,没有任何JavaScript.重复提示#1和#2,然后转到更复杂的样式和布局.继续这个迭代过程,直到您对所有浏览器中的设计感到满意为止.只有这样你才应该考虑使用JavaScript来改进网站.
  4. 经常检查每个浏览器 - 不要在像Firefox这样的单一,兼容的浏览器中开发整个网站,然后决定在IE中"看看有什么坏了".如果您有一个复杂的动态网站,Internet Explorer中可能会出现许多问题.试图在彼此复合时破译每一个是一场噩梦.
  5. 重置样式表 - 正如评论中提到的@Eir,找到一个好的重置样式表.虽然,他们已经失去了一些人的青睐,我发现从一开始就把每个浏览器放在同一个基础上有很大帮助.
  6. 使用框架 - 我发现CSS框架过多,但有些人发誓,所以他自己.另一方面,只要你进入JavaScript开发阶段,我强烈建议使用jQuery或MooTools.他们非常注重避免跨浏览器的不一致.
  7. JSLint伤害你的感受 - 即使使用JavaScript框架,JSLint也会遵循某些编码标准来帮助你顺应.有些选项有点严格,但我保证如果你在开发过程中经常通过这个工具清理你的脚本,你几乎不会遇到那些奇怪的时候,除了IE之外的所有浏览器似乎都有效.

还有一些很棒的工具!上面列表中的所有内容都应该考虑强制执行.以下内容可以为您提供热情,但可选:

  1. CSS浏览器选择器 - 你很少需要它,但是如果所有其他方法都失败了,那就比仅使用一个浏览器的单独样式表更酷(我鄙视条件注释).它基本上会为您的<html>标记添加类,因此您可以在主样式表中执行以下操作: .ie7 #header {/*stylese here for IE7 only*/}.它支持许多操作系统上的许多浏览器.它很快.
  2. Browsershots - 没有什么比真实的东西更好,但如果你不能安装一套浏览器,这个和其他类似的工具可以提供帮助.
  3. IE6 CSS Fixer - 我完全拒绝在IE6中调试我的设计.我强迫我的公司(通过与IT和管理层的许多懊恼的会议)拒绝支持它(感谢上帝).浪费这么多时间迫使这一堆咳嗽只是适得其反...无论如何,如果你不喜欢我并需要支持IE6,这个工具可以提供帮助.