javascript - 为什么 CSS 在本地和远程网站上的工作方式不同？

Question

我有一个 chrome 扩展程序，它基本上将 jquery 自动完成 添加到 facebook 聊天框。

现在，我想把自动补全的建议列表菜单做成横向的。

因此，我尝试更改 jquery-ui.css通过在我设计的本地 html 文件上测试它，它只包含一个 textarea .

所以，我发现在这个 CSS 文件中，如果我对以下内容进行更改:

原文:

...
.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: 2px .4em;
    line-height: 1.5;
    min-height: 0; /* support: IE7 */
    font-weight: normal;
}

更改:

...
.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: inline;
    padding: 2px .4em;
    line-height: 1.5;
    min-height: 0; /* support: IE7 */
    font-weight: normal;
}

问题:

display:block至 display:inline ，我得到一个水平列表。这在本地文件中正常工作。

已经试过!important , 但它不起作用。

但是，当我在 https://www.facebook.com/ 上进行相同的测试时, 它不起作用。

注意:

我还想补充一点，如果我尝试通过更改 font-weight:normal 使列表菜单项变为粗体至 font-weight:bold那么这在本地和 Facebook 上都有效。

那么，如何管理呢？另外，如果需要任何部分代码，请在下方评论，如果您想查看它(我不想让问题过长)，那么我会尽快包含该部分代码。

我对 SO 很陌生，所以如果您希望我以任何方式编辑问题，请发表评论。

P.S.:我正在使用 google chrome 和 opera 网络浏览器来测试这个扩展。

Answer 1

找到了解决方案。

将它添加到这里是为了帮助其他想要水平自动完成菜单的人。

通过以下方式在 facebook html 页面顶部添加了一个 style 标签:

var style = $(document).find('body');
$(style).prepend("<style>.ui-menu-item{display:inline;}</style>");

你也需要在 jquery-ui CSS 文件中有相同的。

我不知道为什么 jquery-ui CSS 文件中的更改只在此处失败，但添加这样的标签解决了问题并使自动完成列表水平显示。

感谢大家的帮助。