在Firefox中覆蓋的CSS樣式

這個問題讓我整天陷入困境。我使用的是Firefox 8和我的影片位於div標籤內的UL元素，div標籤是動畫與jQuery UI的手風琴widget作爲下面的標記顯示：在Firefox中覆蓋的CSS樣式

<div id="accordion"> 
    <a class="ui-accordion-header">Section 1</a> 
    <ul style="width: 250px !important;"> 
     <li> 
      <dl id="MyDefinitionList"></dl> 
     </li> 
    </ul> 
</div>

我的問題是，在Firefox中標記的內聯寬度樣式被覆蓋並重置爲0px。因此，上述最終在Firefox中越來越呈現如下：

<div id="accordion"> 
    <a class="ui-accordion-header">Section 1</a> 
    <ul style="width: 0px;"> 
     <li> 
      <dl id="MyDefinitionList"></dl> 
     </li> 
    </ul> 
</div>

這不會在Chrome或IE發生，我不知道什麼是FF導致此。理想情況下，我想從jQuery動態設置寬度，我嘗試了.width(250)和.css("width", "250px")，但都沒有任何效果，我只是在上面的示例中將它設置爲內聯來測試，並確保它被覆蓋並重置爲0px。 Firefox渲染引擎中是否存在導致此行爲的瀏覽器設置或功能？我也嘗試在jQuery UI CSS中檢查樣式，但沒有看到任何將寬度定義爲0px的東西。任何幫助表示讚賞，因爲我們目前正試圖讓這個Web應用程序被推出，並且它必須是跨瀏覽器兼容的。謝謝。

UPDATE：

有一件事我忘了提這個片段是一個動態的Javascript菜單系統的一部分。我認爲我完全可以將它複製到jsFiddle上。我想知道菜單代與它有什麼關係？雖然菜單代碼或CSS中沒有指定寬度爲0px的內容。它也不能解釋爲什麼會發生在Firefox中，而不是IE或Chrome。

UPDATE 2

下面是從鉻一些快照相比火狐

注意在鉻如預期我計算動態使用jquery寬度被施加到element.style屬性。

enter image description here

但火狐，則element.style復位頁面在爲0px渲染。

enter image description here

來源

2011-11-11 kingrichard2005

這段代碼在這裏工作得很好（FF8.0），你可以把一個非工作的例子放在jsfiddle上嗎？ –

你在本地或在實時Web服務器上執行此操作嗎？ Chrome和FF之間的CSS完全不匹配......缺少能見度，margin-top缺失，display被設置爲none，top被覆蓋。你確定一切都一樣嗎？如果這樣做，您可能會使用CSS文件的緩存版本。我會發布生成手風琴的jQuery代碼。 – skyline3000

的CSS也跟着的傳承..一些CSS屬性從父控件的CSS繼承。就像從身體標記和其他父母一樣。使用FireBug檢查所有這些對於跨瀏覽器問題和更好的UI設計。我附上一張顯示這種無聲的圖像。 enter image description here

希望你能得到關於這個的想法.. 如果你想優先考慮一些CSS屬性不能由父母繼承的屬性影響，然後使用!important他們。例如

a{ display: block !important; }

也許你會從中得到一點點想法..

如果您在運行時添加東西，然後觀察firbug中的更改並根據您的要求更正GUI，然後在.css()的地方使用.addCss()。 api.jquery.com/addClass/

來源

2011-11-11 06:15:39

在Firefox中覆蓋的CSS樣式

回答

相關問題