跨浏览器开发

Question

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

界面设计是无表格的，只使用div + CSS和性能幸福的做法。

现在，虽然与Safari兼容只花了不少时间，IE却是一种痛苦。

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

如果有的话，你能建议一个吗？

谢谢，

猩红

Answer 1

跨浏览器开发

没有工具可以弥补不良行为，但他们可以确保让您的生活更轻松。

话虽这么说，您应该真正提出一个工作流程，让您在花费最少的工作量的情况下优化跨浏览器的兼容性。 如果这对您来说意味着小的迭代或大的整体步骤，那么由您来决定。 但是，通常在开发过程中针对多个浏

我发现有用的工具/资源列表

• Selenium是前端测试的工具
• IETester允许您查看不同IE版本的页面
• Browsershots还允许您在不同平台上查看页面
• 谷歌允许您搜索已知和模糊的IE变态
• IE 6 No More为您节省了很多麻烦，而不用担心IE 6这个名字的史前垃圾
• YUI Graded Browser支持 - 确保您知道要关注哪些浏览器
• jQuery - 跨浏览器的JavaScript库
• YUI 3：重置CSS - 重置你的CSS（链接包含有用的信息以及CSS）
• 9最常见的IE错误以及如何修复它们 - 通过首先解决常见问题，如何最大限度地降低成本的非常有用的技巧。
• 跨浏览器开发包含许多有关跨浏览器开发的有用教程。

参考

硒替代品 / 跨浏览器测试 / 石蕊

Answer 2

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

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

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

Answer 3

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

Answer 4

我还建议使用CSS重置 。 通过这种方式，您从一开始就会遇到很多不一致的问题。

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等。

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