【问题标题】:How to debug the different behavior of the same browser on the different platforms?如何调试同一浏览器在不同平台上的不同行为?
【发布时间】:2011-09-12 17:03:19
【问题描述】:

我正在尝试使用本文介绍的 text-overflow: ellipsis 技术: http://mattsnider.com/css/css-string-truncation-with-ellipsis/ 它在浏览器中的应用范围惊人地广泛。

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

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

【问题讨论】:

    标签: html browser cross-platform ellipsis css


    【解决方案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 发布错误报告.

    【讨论】:

    • 这是一个很好的答案,谢谢!如果仍然出现,我会仔细检查问题并将错误发布给他们。至于 Firefox - 在上面的文章中,有一个 xml 解决方法可以让它工作。
    • @lyuba - 基于 XML 的 Firefox 解决方法仅适用于 FF3.6 及更早版本; FF4 及更高版本不支持破解。 :(
    【解决方案2】:

    如果可以的话,使用 JS 框架。框架社区越大,在特定操作系统 + 浏览器组合上出现问题的可能性就越小。

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

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

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

    【讨论】:

    • 这个问题和 JavaScript 无关,纯 CSS。
    • 我的回答也与 JavaScript 无关。我说的是 JavaScript 框架,比如 YUI、jQuery UI,它们也处理 CSS。示例:yuilibrary.com/gallery/show/ellipsis
    • spektom,我知道这些库,但我确实试图找到并回答一个不同的问题知道:如何理解为什么同一浏览器中的相同 html+css 在不同平台上呈现不同.问题可能不清楚 - 让我更正一下。
    【解决方案3】:

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

    【讨论】:

    • 抱歉,这实际上不是我要问的。我不是在问一般如何调试,我的问题是如何发现特定的跨平台错误,这可能位于浏览器如何呈现页面的方向以及为什么这在平台之间会有所不同。
    猜你喜欢
    • 2012-03-26
    • 2019-05-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-03-02
    • 1970-01-01
    • 1970-01-01
    • 2021-08-04
    相关资源
    最近更新 更多