如何调试不同平台上同一浏览器的不同行为？

Question

我正在尝试使用本文中介绍的文本溢出：省略号技术： http://mattsnider.com/css/css-string-truncation-with-ellipsis/ 它在浏览器中的作用非常广泛。

然而，我注意到的问题是，在Ubuntu + Chrome 11的组合中，它无法正常工作，而在Mac上的同一浏览器中则没问题。

所以我很好奇如何发现这类问题，并了解不同平台上相同浏览器之间不同行为的原因。

Answer 1

众所周知，text-overflow:ellipsis功能难以检测到支持。对于大多数现代浏览器功能，可以运行Javascript代码，该代码将检测浏览器是否支持该功能（请参阅Modernizr项目以获取此功能的最终示例），但遗憾的是text-overflow已失败即使是最坚定的特征检测脚本编写者的努力。

因此，您只能提前查找哪些浏览器支持哪些浏览器，哪些浏览器不支持。

CanIUse site对于这类事情是一个很好的参考;他们为大多数浏览器功能提供了浏览器支持表，包括text-overflow。

顺便说一句 - 您会在该链接的表格中注意到Firefox目前不支持text-overflow;你可能对这个问题很感兴趣：text-overflow:ellipsis in Firefox 4? (and FF5)我在哪里询问是否有任何解决办法（简短的回答是，不，我们只能等到FF7被释放）。

但是，他们没有在支持表上区分平台;假设似乎某个浏览器在所有平台上的工作方式几乎相同。当然并非总是如此。您特别提到您在Ubuntu中遇到了Chrome问题，但在其他平台上却没有。我发现这很奇怪，因为省略号功能似乎不太可能有任何内容需要特定的平台支持，但如果是这样的话，那么很好地证明了相同的浏览器在各个平台上可能并不总是相同。

我没有针对您的具体解决方案。我希望上面的内容对你有用。

在这种特殊情况下，它确实听起来很奇怪 - 如果您能够生成一个简单的测试用例，可以在最新的适用于Windows或Mac的Chrome中运行而不是在Linux中，则可能值得为Chrome发布错误报告。

Answer 2

如果可以的话，使用JS框架。框架社区越大，在某个特定操作系统+浏览器组合上行为不正确的可能性就越小。

编辑：以下是YUI如何为所有浏览器规范化text-overflow: ellipsis的示例：

http://yuilibrary.com/gallery/show/ellipsis

如果这不是一个选项，请使用虚拟机验证不同平台上的应用行为。

Answer 3

使用Chrome上的开发者工具查看是否有调试选项。我不知道Chrome，但IE可以在IE Developer Tools上调试它。