我正在开发一个新服务的Web应用程序，从Firefox 3.5开始。
该界面设计是无表格的，只使用div + CSS和性能提升的实践方法。
现在，虽然与Safari兼容只花费了很少的时间，但IE则非常麻烦。
我的问题是：是否有任何可以加速跨浏览器检查的工具？例如，我已经知道了FF和IE之间的许多差异，但是一个特定的工具可能会更有帮助。
如果有的话，你能否建议一个？
谢谢，
Scarlet
8个回答
21
跨浏览器开发
没有任何工具可以弥补错误的行为，但它们确实可以让你的生活更轻松。
话虽如此，您应该确立一种工作流程，让您以最少的工作量优化跨浏览器兼容性。如果这对您来说意味着小的迭代步骤或大的整体步骤，那么这取决于您自己的决定。但通常在开发过程中针对多个浏览器进行工作，即使不能节省时间，也至少会为D日带来很大的头疼。
我发现有用的工具/资源列表
- Selenium 是一个前端测试工具
- IETester 可让您查看不同版本的 IE 上的页面
- Browsershots 可让您在不同平台上查看页面
- Google 可让您搜索已知和鲜为人知的 IE 不规则行为
- IE 6 No More 让您不必再费心处理名为 IE 6 的史前遗物
- YUI Graded Browser Support - 确保您知道要关注哪些浏览器
- jQuery - 跨浏览器的 JavaScript 库
- YUI 3: Reset CSS - 重置CSS（链接中包含有用的信息和CSS）
参考资料
Selenium替代方案 / 跨浏览器测试 / Litmus
- Peter Lindqvist
5
1也有一个类似于Firebug的IE调试工具，叫做Debugbar。虽然没有Firebug强大，但在某些情况下很有帮助。但如果您没有安装IE，它就无法为您提供帮助。 - Arto Uusikangas
我还找到了一个有助于发现所有那些讨厌的IE漏洞的资源。http://www.good-tutorials.com/tutorials/css/cross-browser-development - Arto Uusikangas
是的，我也是这么认为的，但这完全取决于你的潜在用户群。 - Peter Lindqvist
有没有一个框架可以确保你编写的代码跨浏览器兼容？列表中的大多数选项都允许在编写代码之后检查兼容性。 - Aditya P
大多数并不是框架，而更像是指南和实用工具，因此它们确保某些方面的能力仅限于一个或几个选择性的重点领域。有些工具，例如jQuery，实际上强制执行跨浏览器兼容性，但仅限于JavaScript领域，并且只有在使用jQuery提供的函数时才能实现。 - Peter Lindqvist
6
这不是直接回答你的问题，而是基于我个人的经验给出的建议。
当你在为多个浏览器开发时，最好的方法是在编码过程中同时测试所有浏览器。
这样一来，你只需要每次纠正小错误，而不是面对复杂的布局问题。
- Soufiane Hassou
1
我也是，即使有时候它变得有点烦人。然而这是一个很好的练习。 - Federico Zancan
4
我不知道有哪个软件可以主动检测问题，但是Adobe最近发布了 BrowserLab ，这真的可以加快跨浏览器测试。
- tom
1
到目前为止，我的经验不是很好。当我尝试登录时，它说我的用户名或密码不正确。我不得不在另一个Adobe网站上登录，然后返回，同时保持登录状态... - Guffa
2
我建议使用CSS重置（CSS reset）（http://developer.yahoo.com/yui/3/cssreset/）。这样，您可以从一开始就解决很多不一致的问题。
- Egor Pavlikhin
1
1大多数情况下，我只是将margin: 0, padding: 0; 应用于星号*通配符。 - richard
2
我进行跨浏览器开发，不使用任何规定的模式，如跨浏览器测试。我使用一种装饰性模式。有时它非常有效，有时候则会带来麻烦，但这对于任何开发模式都是如此。
我的大部分开发都在我认为最符合标准的浏览器中进行。我更喜欢WebKit而不是Presto，但两者在标准兼容性方面通常不相上下。对于这些浏览器，正确使用HTML和CSS几乎总能产生理想的结果。我选择的WebKit浏览器是Google Chrome。Safari也可以，但请记住，在Mac OS X上，字体平滑处理往往会使文本变大。为确保与为Safari Mac设计的网站兼容，Safari Win会加粗字体，因此它并不总是您网站的最完美呈现。
如果您正在尝试快速原型化跨浏览器站点设计，则Blueprint CSS可能非常有帮助。我并不确定是否总是需要这样的框架，它们还可能影响您构建XHTML标记的方式，弯曲您的标记以匹配预先存在的CSS类层次结构并不总是一个好主意。
一旦我在符合标准的浏览器中得到一个满意的设计，我就会使用条件样式或样式表在其他不太符合标准的浏览器中修复其中的错误。至少从3.0版本开始，Firefox几乎从未成为一个大问题，但是有办法专门针对Firefox进行定位，甚至可以仅使用CSS区分Gecko 1.9和1.8。这在技术上是一个hack，因此CSS纯粹主义者可能会嗤之以鼻，但它是一个可靠、可用的解决方案。为了清晰和易于维护，我通常会将我的Firefox / IE修复程序保留在隔离的样式表中，并使用某种服务器端脚本编译它们，这比条件包含语句和JavaScript hack更可取。如果您使用PHP缓存，这并不是一个显著的瓶颈或CPU时间浪费。 IETester是一个不可或缺的工具，可以检查所有不同版本的IE中的设计，甚至使用每个版本的适当JScript引擎，而以前不太可靠的解决方案（如MultipleIEs）则缺乏这一点。
现在，跨浏览器开发的最大问题是JavaScript，而jQuery基本上可以在这里拯救你的生命。作为一名在AJAX和JavaScript界面出现之前为企业网站维护大型JavaScript框架的人员，我对jQuery/Prototype/Dojo无限赞扬。
我的大部分开发都在我认为最符合标准的浏览器中进行。我更喜欢WebKit而不是Presto，但两者在标准兼容性方面通常不相上下。对于这些浏览器，正确使用HTML和CSS几乎总能产生理想的结果。我选择的WebKit浏览器是Google Chrome。Safari也可以，但请记住，在Mac OS X上，字体平滑处理往往会使文本变大。为确保与为Safari Mac设计的网站兼容，Safari Win会加粗字体，因此它并不总是您网站的最完美呈现。
如果您正在尝试快速原型化跨浏览器站点设计，则Blueprint CSS可能非常有帮助。我并不确定是否总是需要这样的框架，它们还可能影响您构建XHTML标记的方式，弯曲您的标记以匹配预先存在的CSS类层次结构并不总是一个好主意。
一旦我在符合标准的浏览器中得到一个满意的设计，我就会使用条件样式或样式表在其他不太符合标准的浏览器中修复其中的错误。至少从3.0版本开始，Firefox几乎从未成为一个大问题，但是有办法专门针对Firefox进行定位，甚至可以仅使用CSS区分Gecko 1.9和1.8。这在技术上是一个hack，因此CSS纯粹主义者可能会嗤之以鼻，但它是一个可靠、可用的解决方案。为了清晰和易于维护，我通常会将我的Firefox / IE修复程序保留在隔离的样式表中，并使用某种服务器端脚本编译它们，这比条件包含语句和JavaScript hack更可取。如果您使用PHP缓存，这并不是一个显著的瓶颈或CPU时间浪费。 IETester是一个不可或缺的工具，可以检查所有不同版本的IE中的设计，甚至使用每个版本的适当JScript引擎，而以前不太可靠的解决方案（如MultipleIEs）则缺乏这一点。
现在，跨浏览器开发的最大问题是JavaScript，而jQuery基本上可以在这里拯救你的生命。作为一名在AJAX和JavaScript界面出现之前为企业网站维护大型JavaScript框架的人员，我对jQuery/Prototype/Dojo无限赞扬。
- Andrew Noyes
1
当你说仅使用div和CSS时，希望你不是在绝对定位所有元素。这是在许多浏览器中破坏设计的一种有效方法。（通常最佳做法是使用浮动。）
你也可以尝试使用IE7.js来解决IE 6-7的一系列问题。
总的来说，我建议在IE和符合标准的其他浏览器（Firefox/Chrome/Safari/Opera）中并行开发。并且尽量保持HTML和CSS尽可能简单。
- DisgruntledGoat
1
另外还有一些工具可以使用：
- Browsera - 自动检测跨浏览器布局问题
- LitmusApp - 屏幕截图并标记通过/失败的标签
- SuperPreview - 是 Microsoft Expression Web 的扩展（目前可作为单独下载），您可以查看不同浏览器的覆盖层截图
- Browserlab - 是 Adobe Dreamweaver 的扩展（目前可在线单独使用），您可以查看不同浏览器的覆盖层截图
我还强烈建议使用 CSS 重置来开始编写，例如 http://meyerweb.com/eric/tools/css/reset/。
为什么？因为许多跨浏览器的不一致性源自于浏览器中的默认样式不同。例如，在一个浏览器中，一个默认的边距可能会使元素正确布局，但在其他浏览器中则不行。
似乎总是要覆盖默认行为有点奇怪，因为这似乎是一种浪费，但这是绝对必要的，以便拥有一个基准来工作。
- Browsera
1
我建议您看一下像BluePrint这样的CSS框架。它有一种通用的方式来使用网格构建页面，并且还具有一些默认的表单等CSS。
在开发过程中，框架已经处理了许多跨浏览器的怪癖，因此可以节省您很多时间。
在开发过程中，框架已经处理了许多跨浏览器的怪癖，因此可以节省您很多时间。
- JonoW
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接