(I'd like this to be the definitive community wiki. I seeded it from my own answer to this question.)
(我希望这是最权威的社区维基。我根据自己对这个问题的回答来播种。)
Specify Everything
A lot of cross-browser issues amount to this: you didn't specify something, and different browsers make different assumptions. Therefore:
许多跨浏览器问题相当于:您没有指定某些内容,并且不同的浏览器会做出不同的假设。因此:
Declare a valid doctype
Your doctype tells the browser what rules you'll be using in your code. If you don't specify, the browser has to guess, and different browsers will guess differently.
您的doctype告诉浏览器您将在代码中使用哪些规则。如果您没有指定,则浏览器必须猜测,并且不同的浏览器将以不同的方式猜测。
In my experience, a "strict" doctype makes IE behave better (enables things like CSS :hover selectors on divs in IE7).
根据我的经验,“严格”的doctype使IE表现得更好(启用CSS之类的东西:IE7中div上的悬停选择器)。
This article gives good background on doctypes.
本文提供了有关doctypes的良好背景知识。
Use Web standards
Avoid browser-specific markup, or only use it when its failure in other browsers won't be significant to the site experience.
避免使用特定于浏览器的标记,或仅在其他浏览器中的故障对站点体验不重要时才使用它。
Validate your HTML and CSS
You don't have to get everything perfect, but validation is good feedback. As Jeff said:
您不必完美无缺,但验证是很好的反馈。正如杰夫所说:
Knowing the rules and boundaries helps you define what you're doing, and gives you legitimate ammunition for agreeing or disagreeing. You can make an informed choice, instead of a random "I just do this and it works" one.
Imagine you opened a paragraph tag and never closed it. If you then open a list tag, did you mean it to be inside the paragraph or not? Validating will help you catch that, close the tag, and eliminate ambiguity.
想象一下,你打开一个段落标签,从未关闭它。如果你打开一个列表标签,是不是意味着它在段落内?验证将帮助您捕获,关闭标记并消除歧义。
Consider a CSS Reset
Different browsers assume different baseline CSS rules. You can help them all to act the same by explicitly ironing out the differences up front. Eric Meyer, who wrote CSS: The Definitive Guide, uses this reset. Another popular choice is YUI Reset CSS.
不同的浏览器采用不同的基线CSS规则您可以通过明确解决前面的差异来帮助他们所有人采取同样的行动。编写CSS:The Definitive Guide的Eric Meyer使用了这个重置。另一个受欢迎的选择是YUI重置CSS。
Use a Javascript library for DOM interactions
Whenever your Javascript needs to work with elements on your page, it's best to use a library like jQuery, Prototype, or MooTools. These libraries are used by many thousands of developers, and they take most of the inconsistencies between browsers' interpretation of Javascript, deal with those internally, and give you a consistent set of commands that just work. Trying to find and work around all these inconsistencies yourself is a waste of time and likely to create bugs.
每当您的Javascript需要使用页面上的元素时,最好使用jQuery,Prototype或MooTools等库。这些库被成千上万的开发人员使用,它们消除了浏览器对Javascript的解释之间的大部分不一致,在内部处理这些库,并为您提供一组一致的命令。试图找到并解决所有这些不一致的问题是浪费时间并且可能会产生错误。
Test in multiple browsers, deal with IE last
Test in multiple browsers as you go. Generally, you'll find that non-IE browsers behave similarly and IE is a special case - especially if you follow the advice above. When necessary, you can add IE hacks in a separate stylesheet and only load it for IE users.
随时在多个浏览器中进行测试。通常,您会发现非IE浏览器的行为类似,IE是一种特殊情况 - 特别是如果您遵循上述建议。必要时,您可以在单独的样式表中添加IE hacks,并仅为IE用户加载它。
Quirksmode.com is a good place for hunting down random browser differences.
Quirksmode.com是一个搜索随机浏览器差异的好地方。
Browsershots.org can help show how your page will be displayed in an assortment of browsers and operating systems.
Browsershots.org可以帮助显示您的页面如何在各种浏览器和操作系统中显示。
Fail Gracefully
No site will look perfect in every browser that exists. If a user doesn't have Flash, or Javascript, or advanced CSS, etc, you want your site to be usable anyway. Design with that in mind:
在每个存在的浏览器中,任何网站都不会看起如果用户没有Flash,Javascript或高级CSS等,您仍希望您的网站可用。考虑到这一点的设计:
Check the bare HTML
Try loading your site with bare HTML - no styles, no scripts. Are menu options available? Does primary content precede secondary content? Is the site usable, even if ugly?
尝试使用裸HTML加载您的网站 - 没有样式,没有脚本。有菜单选项吗?主要内容是否位于次要内容之前?该网站是否可用,即使丑陋?
Consider test-driven progressive enhancement
Described in this article, this technique uses javascript to check if a browser has a given capability, such as support for a given CSS property, before using it on the page. It is unlike browser sniffing because it tests for features rather than a specific browser.
在本文中描述,此技术使用javascript来检查浏览器是否具有给定的功能,例如在页面上使用它之前支持给定的CSS属性。它与浏览器嗅探不同,因为它测试的是功能而不是特定的浏览器。
7 个解决方案
#1
Use a library like jQuery abstract away the differences in the DOM, AJAX and JavaScript.
使用类似jQuery的库抽象出DOM,AJAX和JavaScript的差异。
#2
Make sure you're keeping HTML, CSS and Javascript in separate files as much a possible. Mixing structure, presentation and behavior in your HTML file just makes finding and fixing problems harder.
确保尽可能将HTML,CSS和Javascript保存在单独的文件中。在HTML文件中混合结构,表示和行为只会使查找和修复问题变得更加困难。
#3
Use Firebug in Firefox for:
在Firefox中使用Firebug:
- Debugging/stepping through your JS.
- Seeing how your stylesheets are being interpreted and hacking them up on the fly to see how to fix your problem.
- See how many calls you are making for remote resources and how long they take.
- Profile your code.
调试/单步执行JS。
看看您的样式表是如何被解释的,并在运行中黑客攻击它们以了解如何解决您的问题。
查看您为远程资源拨打了多少电话以及他们需要多长时间。
描述您的代码。
Chrome and IE8 have similar tools built-in that can be used for the same thing.
Chrome和IE8内置了类似的工具,可用于同一件事。
Opera and Safari (and IE) have Firebug Lite.
Opera和Safari(和IE)都有Firebug Lite。
#4
#5
My #1 rule is use a strict doctype. HTML or XHTML is fine, but using the strict doctype removes pretty much every browser quirk there is, especially in IE7+.
我的#1规则是使用严格的doctype。 HTML或XHTML很好,但使用严格的doctype几乎消除了每个浏览器的怪癖,特别是在IE7 +中。
Imagine you opened a paragraph tag and never closed it. If you then open a list tag, did you mean it to be inside the paragraph or not?
想象一下,你打开一个段落标签,从未关闭它。如果你打开一个列表标签,是不是意味着它在段落内?
Actually you can't put any other block tags inside a <p> tag, that's why the spec allows you to omit the closing tag. If you start a list without closing a paragraph, then the paragraph is implicitly closed. And the validator won't complain.
实际上你不能在
标签内放置任何其他的块标签,这就是规范允许你省略结束标签的原因。如果在不关闭段落的情况下启动列表,则隐式关闭段落。验证者不会抱怨。
That's not to say you shouldn't close tags, because it generally makes code easier to skim (you don't need to remember the above rules).
这并不是说你不应该关闭标签,因为它通常使代码更容易浏览(你不需要记住上述规则)。
#6
Consider programming you web-site's UI using Google Web Toolkit. With GWT you write all code in Java programming language which GWT then cross-compiles into optimized JavaScript that automatically works across all major browsers.
考虑使用Google Web Toolkit为您的网站UI编程。使用GWT,您可以使用Java编程语言编写所有代码,然后GWT将其交叉编译为优化的JavaScript,可自动在所有主流浏览器中运行。
#7
I think using best practice is the way to go, progressive enhancement is designing with the user in mind and needs to be done with all designers. I believe that a lot of testing on browsers is a good way to ensure proper content is being displayed, many developers over look this.
我认为使用最佳实践是要走的路,渐进式增强是在考虑用户的情况下进行设计,需要与所有设计师一起完成。我相信在浏览器上进行大量测试是确保正确显示内容的好方法,许多开发人员都在考虑这个问题。
#1
Use a library like jQuery abstract away the differences in the DOM, AJAX and JavaScript.
使用类似jQuery的库抽象出DOM,AJAX和JavaScript的差异。
#2
Make sure you're keeping HTML, CSS and Javascript in separate files as much a possible. Mixing structure, presentation and behavior in your HTML file just makes finding and fixing problems harder.
确保尽可能将HTML,CSS和Javascript保存在单独的文件中。在HTML文件中混合结构,表示和行为只会使查找和修复问题变得更加困难。
#3
Use Firebug in Firefox for:
在Firefox中使用Firebug:
- Debugging/stepping through your JS.
- Seeing how your stylesheets are being interpreted and hacking them up on the fly to see how to fix your problem.
- See how many calls you are making for remote resources and how long they take.
- Profile your code.
调试/单步执行JS。
看看您的样式表是如何被解释的,并在运行中黑客攻击它们以了解如何解决您的问题。
查看您为远程资源拨打了多少电话以及他们需要多长时间。
描述您的代码。
Chrome and IE8 have similar tools built-in that can be used for the same thing.
Chrome和IE8内置了类似的工具,可用于同一件事。
Opera and Safari (and IE) have Firebug Lite.
Opera和Safari(和IE)都有Firebug Lite。
#4
#5
My #1 rule is use a strict doctype. HTML or XHTML is fine, but using the strict doctype removes pretty much every browser quirk there is, especially in IE7+.
我的#1规则是使用严格的doctype。 HTML或XHTML很好,但使用严格的doctype几乎消除了每个浏览器的怪癖,特别是在IE7 +中。
Imagine you opened a paragraph tag and never closed it. If you then open a list tag, did you mean it to be inside the paragraph or not?
想象一下,你打开一个段落标签,从未关闭它。如果你打开一个列表标签,是不是意味着它在段落内?
Actually you can't put any other block tags inside a <p> tag, that's why the spec allows you to omit the closing tag. If you start a list without closing a paragraph, then the paragraph is implicitly closed. And the validator won't complain.
实际上你不能在
标签内放置任何其他的块标签,这就是规范允许你省略结束标签的原因。如果在不关闭段落的情况下启动列表,则隐式关闭段落。验证者不会抱怨。
That's not to say you shouldn't close tags, because it generally makes code easier to skim (you don't need to remember the above rules).
这并不是说你不应该关闭标签,因为它通常使代码更容易浏览(你不需要记住上述规则)。
#6
Consider programming you web-site's UI using Google Web Toolkit. With GWT you write all code in Java programming language which GWT then cross-compiles into optimized JavaScript that automatically works across all major browsers.
考虑使用Google Web Toolkit为您的网站UI编程。使用GWT,您可以使用Java编程语言编写所有代码,然后GWT将其交叉编译为优化的JavaScript,可自动在所有主流浏览器中运行。
#7
I think using best practice is the way to go, progressive enhancement is designing with the user in mind and needs to be done with all designers. I believe that a lot of testing on browsers is a good way to ensure proper content is being displayed, many developers over look this.
我认为使用最佳实践是要走的路,渐进式增强是在考虑用户的情况下进行设计,需要与所有设计师一起完成。我相信在浏览器上进行大量测试是确保正确显示内容的好方法,许多开发人员都在考虑这个问题。