jQuery UI - 自动完成生成的内联样式覆盖？答案

【问题标题】：jQuery UI - Autocomplete generated inline style override?jQuery UI - 自动完成生成的内联样式覆盖？
【发布时间】：2011-11-09 21:31:09
【问题描述】：

我正在使用jQuery Autocomplete plugin，它会在出现建议时生成以下标记。

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 16; width: 1355px; position: relative; top: -1615px; left: 40px; display: none; ">
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all" tabindex="-1">java</a>
    </li>
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all" tabindex="-1">javascript</a>
    </li>
</ul>

我的理解是，它使用UI Position 插件来相对于输入字段定位它。但是在生成的style="z-index: 16; width: 1355px; position: relative; top: -1615px; left: 40px; display: none; " 里面，宽度比我的输入字段长得多。由于这是模块添加的内联样式，我无法使用 ui-autocomplete 选择器覆盖它。有什么想法吗？

【问题讨论】：

注意：我的输入框宽度是1140px

标签： jquery jquery-ui autocomplete jquery-autocomplete

【解决方案1】：

在css中使用!important方法：例如

.ui-autocomplete {
    width:200px !important;
}

【讨论】：

很棒的修复！我遇到了同样的问题，即 jQuery UI（用于选项卡）注入了内联样式宽度，而在 IE 上它总是基于像素（所有其他浏览器都是基于百分比并且是正确的值）。使用您在我的 CSS 中提出的 '!important' 标志，IE 可以像所有其他浏览器一样工作......谢谢！
@Jeach 很高兴知道它对您有所帮助。你应该怎么想这个方法是最后一个可能的选择。因为它会让你陷入最痛苦的 css 调试之一。
感谢您的提示！但是出于好奇，您（或其他任何人）知道为什么在 IE 上，它们会注入一个像素值（太宽，会使事情变得更糟），而所有其他浏览器，它们会注入一个百分比？
也许 IE 无法达到 100%。例如：width = 950； 950 的 25% 是 237.5。也许 IE 会尝试将其呈现为 238 和 237。我不知道这只是一个假设。但是以太方式你将有2像素备用。