寬度設置爲100％超過容器在Firefox中

我有一個菜單這個煩人的問題。在Firefox中，「ul」標籤超過了它的父容器。在Chrome和IE中，它不會。寬度設置爲100％超過容器在Firefox中

我想要什麼：我想的下拉菜單，以具有相同的寬度與其父（在Chrome中打開的例子，看看它應該是什麼樣子）

<ul> 
    <li><a href="/sommer-2013">Sommer 2013</a> 
    <ul> <--- This one exceeds it's parent 
     <li><a href="/sommer-2013/vinter-2012">Vinter 2012</a></li> 
    </ul> 
    </li> 
    <li><a href="/webshop.html">WEBSHOP</a></li> 
    <li><a href="/company.html">COMPANY</a></li> 
    <li><a href="/stores.html">STORES</a></li> 
</ul>

來源

2013-01-16 dasmikko

http://jsfiddle.net/biznuge/2vNpE/12/

砍死膽量出來的東西是在原來的小提琴。對於那個很抱歉。

看了之後，我並沒有感覺到關於位置的解釋：關於DOM中下一個相對父項的繼承問題，絕對正確的問題是非常正確的，所以我嘗試修改顯示模式「你的桌子」結構。

nav{ 
    /*display: table;*/ 
}  
nav>ul{ 
    /*display: table-row;*/ 
} 
nav>ul>li{ 
    /*display: table-cell;*/ 
}

去除表，錶行和表單元格後顯示的寬度繼承突然開始工作。

將採取更多一點一看這個，因爲我一直在使用表，而現在，迫使某些佈局，如菜單結構等

問得好@dasmikko！

來源

2013-01-16 15:47:45 BizNuge

你有沒有設置填充爲0？

該規範說，填充應該是寬度（IE忽略了這一點，而且似乎可能Chrome適用於一個對象的容器時）。

來源

2013-01-16 14:32:39

是的，我只是忘了把它添加到jsfiddle鏈接。現在更新它！ – dasmikko

ul是一個塊元素，你根本不需要設置寬度 - 默認情況下它已經使用整個可用寬度（這將是100％填充）。 li也是如此。

至於爲什麼它超過了它的容器，這可能是由於Firefox，Chrome和IE之間的默認填充/邊距不同。如果是這種情況，只需在ul,li和a上設置padding: 0; margin: 0; border: 0即可。

來源

2013-01-16 14:33:20 Magnus

我更新了鏈接，包括我的CSS重新設置者。消除寬度沒有太大的作用。 – dasmikko

@dgvid是對的，這是因爲你正在使用'position：absolute;'你可能想設置一個固定的寬度，而不是那種情況 - 類似20em似乎很好。「li」應該根據需要擴展。另外，你的CSS似乎比它應該更復雜。 – Magnus

該問題與絕對定位的內部ul有關。因爲它是絕對定位的，所以相對寬度，即百分比，是相對於文件本身而不是它的容器。根本不要設置寬度，並且ul的尺寸將適合其容器。換句話說，從規則中刪除nav ul和nav ul li ul的寬度設置。至於爲什麼這是Firefox下的問題，而不是Chrome，我不知道。建議，任何人？

來源

2013-01-16 14:41:42 dgvid

但是接下來的問題就出現了，因爲我想讓子ul的寬度與父（li）相同。 – dasmikko

寬度設置爲100％超過容器在Firefox中

回答

相關問題