jQuery UI - 自動完成生成的內聯樣式重寫？

我使用的是jQuery Autocomplete plugin，當建議出現時，它會生成以下標記。jQuery UI - 自動完成生成的內聯樣式重寫？

<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選擇器覆蓋此選項。有任何想法嗎？

來源

2011-11-09 Hossain Khan

注：我的輸入欄的寬度是'1140px' –

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

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

來源

2011-11-09 21:38:51 andlrc

真棒修復！我有同樣的問題，其中jQuery UI（對於標籤）注入了內聯樣式寬度，在IE上它總是基於像素（所有其他瀏覽器都是基於百分比並且是正確的值）。在我的CSS中提出'！important'標誌，IE與所有其他瀏覽器一樣工作......謝謝！ – Jeach

@Jeach很高興知道這對你有所幫助。你應該怎麼看待最後的可能選擇這種方法。因爲它可以讓你進入最痛苦的css調試之一。 – andlrc

感謝您的提示！但出於好奇，你（或其他人）是否知道爲什麼在IE上，他們注入了一個像素值（這太寬了，讓事情變得更糟）以及所有其他瀏覽器，他們注入了一個百分比？ – Jeach

jQuery UI - 自動完成生成的內聯樣式重寫？

回答

相關問題