跨浏览器开发

Question

我正在开发一个新服务的Web应用程序，从Firefox 3.5开始。

界面设计无表格，仅使用div + CSS＆amp;表现幸福的做法。

现在，虽然与Safari兼容只花了不少时间，但IE很痛苦。

我的问题是：有什么可以用来加速跨浏览器检查吗？我已经知道FF和IE之间的许多不同点，但是一个特定的工具可能会帮助更多。

你能推荐一个吗？

谢谢，

血色

Answer 1

跨浏览器开发

任何工具都无法弥补不良行为，但他们可以确保您的生活更轻松。

话虽这么说，您应该真正想出一个工作流程，让您在花费最少的工作量的情况下优化跨浏览器的兼容性。如果这对您来说意味着小的迭代或大的整体步骤，那么由您来决定。但是，通常在开发过程中针对几个浏览器进行操作可以节省您的时间，至少在d-day时至少会出现一个主要问题。

我认为有用的工具/资源列表

• Selenium是前端的工具 测试
• IETester可让您查看 不同IE版本的页面
• Browsershots可让您查看 不同平台上的页面
• Google可让您搜索已知且模糊的IE变态
• IE 6 No More为您节省了很多麻烦，而不用担心以IE 6为名的史前废话
• YUI Graded Browser Support - 确保您知道要关注哪些浏览器
• jQuery - 跨浏览器javascript库
• YUI 3: Reset CSS - 重置您的CSS（链接包含有用的信息以及CSS）
• 9 Most Common IE Bugs and How to Fix Them - 关于如何通过首先解决常见问题来获得最大收益的非常有用的提示。
• Cross browser development包含许多有关跨浏览器开发的有用教程。

参考

Selenium alternatives / Cross Browser Testing / Litmus

Answer 2

这不会回答你的问题，而只是基于我个人经验的建议。

当您为许多浏览器开发时，最好的办法是在编码时同时测试所有浏览器。

这样你每次都必须纠正小错误，而不是压倒复杂的布局问题。

Answer 3

我不知道任何主动检查问题的软件，但Adobe最近发布了BrowserLab，这确实加速了跨浏览器测试。

Answer 4

我还建议使用CSS reset。这样一来，你就会从一开始就遇到很多不一致的问题。

Answer 5

我进行跨浏览器开发，并没有真正使用任何规定的模式，例如跨浏览器测试。我改为使用装饰图案。有时它的效果非常好，有时令人头疼，但对于任何开发模式都可以这么说。

我的大部分开发都发生在我认为最符合标准的浏览器中。我更喜欢WebKit和Presto，但两者通常都符合标准。使用这些浏览器，正确使用HTML和CSS几乎总能产生理想的结果。我选择的WebKit浏览器是Google Chrome。 Safari也可以工作，但请记住，在Mac OS X上，字体平滑往往会使文本更大。为了确保与为Safari Mac设计的网站兼容，Safari Win会对字体进行加固，因此它并不总是代表您网站的最完美像素。

如果您尝试快速构建跨浏览器网站设计原型，那么Blueprint CSS可以提供​​巨大的帮助。我不相信这样的框架总是必要的，它们也会影响你构建XHTML标记的方式，并且扭曲你的标记以匹配预先存在的CSS类层次结构并不总是一个好主意。

一旦我在符合标准的浏览器中拥有一个我很满意的设计，我就可以使用条件样式或样式表在其他不太符合标准的浏览器中修复错误。 Firefox，至少从3.0版开始，几乎从来不是一个大问题，但有一些方法可以专门针对Firefox，甚至只使用CSS来区分Gecko 1.9和1.8。从技术上讲，这是一个黑客行为，所以CSS纯粹主义者可能会嘲笑代码亵渎，但它是一个可靠，可用的解决方案。为了清晰和易于维护，我通常在单独的样式表中维护我的Firefox / IE修复程序，并使用某种服务器端脚本编译它们，我认为这些脚本优于条件包含语句和JavaScript黑客。如果你使用PHP进行缓存，这不是一个重要的瓶颈或浪费CPU时间。

IETester是检查所有不同IE版本中的设计的必不可少的工具，它甚至为每个版本使用适当的JScript引擎，而之前不太可靠的解决方案如MultipleIEs缺乏。

目前，跨浏览器开发的最大问题是JavaScript，jQuery基本上可以挽救你的生活。作为在AJAX和JavaScript接口之前的几天为公司网站维护了一个相当大的JavaScript框架的人，所以我可以为jQuery / Prototype / Dojo提供的赞誉数量没有限制。

Answer 6

当你说只使用div和CSS时，我希望你不是绝对定位一切。这是在许多浏览器中混乱设计的可靠方法。 （通常最好的做法是使用花车。）

您还可以尝试使用IE7.js解决IE 6-7的一系列问题。

一般情况下，我建议在IE和兼容标准的浏览器之一（Firefox / Chrome / Safari / Opera）进行开发。并尝试尽可能简化HTML和CSS。

Answer 7

还有一些工具包括

• Browsera - 自动检测跨浏览器布局问题
• LitmusApp - 带有通过/失败标记的屏幕截图
• SuperPreview - Microsoft Expression Web的扩展（目前可用的独立下载），您可以在其中查看其他浏览器的叠加屏幕截图
• Browserlab - Adob​​e Dreamweaver的扩展程序（目前可在线独立），您可以在其中查看其他浏览器的叠加截图

我还强烈建议您使用CSS重置启动，例如http://meyerweb.com/eric/tools/css/reset/

为什么呢？因为许多跨浏览器的不一致源于浏览器中的默认样式不同。例如，默认边距可以在一个浏览器中正确地进行元素布局，而不是其他浏览器。

总是覆盖默认行为似乎很奇怪，因为它似乎是一种浪费，但它绝对是必要的，以便有一个基线可以工作。

Answer 8

我建议查看像BluePrint这样的CSS框架。它有一种使用网格构建页面的通用方法，并且还有一些表单等的默认css。

Frameworks将在开发过程中处理许多这些跨浏览器的怪癖，因此它可以为您节省大量时间。