Firefox vs IE vs Chrome vs Safari

Question

目前我正在设计一个网站,我发现很难在所有浏览器上显示完美的网站.

是否有任何规则,建议等可供遵循？

谢谢

Answer 1

制定标准,然后添加例外

目前,最受欢迎的大多数兼容浏览器是Firefox,因此向Firefox开发是自然的第一步.使用W3C的验证器确保您正常运行.一旦您的页面大部分完成,请确认它在Safari和Chrome中看起来仍然很好(同时也是高度兼容的浏览器,所以您不应该有太多麻烦),然后开始为IE(6 和 7)修复它.相信我,它需要修复!在添加异常时,像QuirksMode这样的网站可以提供很大的帮助.

始终使用HTML 4.01严格DOCTYPE

由于XHTML有很多支持者,这可能会成为争议点之一.不幸的是,以IE兼容和标准兼容的方式提供XHTML文件是不可能的 - IE将无法识别XHTML MIME类型,并且违反了将其作为服务的标准text/html.只有HTML 4.01 Strict DOCTYPE才能将所有浏览器置于(接近)标准模式,同时仍然符合标准.有关详细信息,请查找DOCTYPE切换.如果您在没有编写格式良好的XML的页面的情况下绝对无法使用,请使用XSL Transformation将您的页面从您选择的XML样式转换为HTML.

不要使用CSS"hacks"

它们有时很诱人,但黑客攻击是基于浏览器错误的副作用.因此,很难预测未来的浏览器将如何对它们作出反应.另一方面,条件注释是IE浏览器的有意功能,因此可以安全使用.实际上,它们是将IE特定(通常是非验证)CSS保留在有效样式表之外的绝佳方法.

不要创建像素对齐的布局

试图让所有浏览器排成一行,直到像素是一种挫折(并且通常是徒劳的).尝试创建在破坏时仍然看起来不错的布局,因为更容易修复两个左手边框之间的错位,而不是在页面两侧的左侧和右侧之间!使用具有内置边框的背景图像应该是一个很大的警示标志!

不要使用绝对大小的字体

并非所有人都使用与您相同尺寸的显示器; 而不是设置脚注font-size: 10px;,将其设置为font-size: smaller;或font-size: 80%;.这是一个很大的acessibility问题.

不要依赖CSS属性的默认值

您永远不知道所有浏览器是否使用相同的默认值. YUI的"重置"样式表是一个很好的起点.

Answer 2

实际上,在所有浏览器和平台上使网站看起来完全一样是不可能的.第一个原因是在Windows,Mac,Linux,Solaris等上呈现的字体不同.

我们遵循一个新的想法:网站不必在不同的浏览器和平台上看起来完全相同.你可以很容易地把它带到96-98%的路上.其余的将为您带来过多的努力以获得潜在的收益.

我们开始为Firefox开发.如果我们得到那个,那么其余的浏览器非常接近.在大多数情况下,IE是非常棘手的.我建议您告诉您的客户或您自己IE 6不再是真正的要求.

确保通过使用"重置"css样式表从右脚开始,将所有浏览器输出放在同一个地面上.退房:http://developer.yahoo.com/yui/reset/

最后,为自己省去一些麻烦,并在诸如ExtJS或JQuery或Prototype之类的Javascript库上进行标准化,这将隐藏浏览器差异并让您专注于项目的代码.

Answer 3

• 确保您的XHTML和CSS验证.
• 只使用标准的Javascript.
• 在一个主要(非IE)浏览器中测试:Firefox或Chrome将是我的建议.
• 您的网站现在应该在主要(非IE)浏览器中看起来非常接近
• 测试像dillo或lynx(或两者)
• 最后,开始做黑客让IE工作

Answer 4

查看Browsershots.它使用各种浏览器制作您网站的屏幕截图,因此您可以直观地检查它.它有点慢但它对我有用.

Answer 5

这是我刚才给出的关于在浏览器中完善网站的答案(从这里开始)

实际上,开发Web应用程序时需要使用的是:

• 火狐
• IE
• 苹果浏览器
• (Chrome很快......)

我的意思是你应该在所有3个主要的A级浏览器上测试你网站的每一步 ......所以如果某些东西在这个过程中不起作用,你就会确切地知道是什么导致了这个中断.

如果您不定期查看浏览器的页面结果,那么以后修复问题将会困难得多.