包含浮動子元素的元素的寬度自動問題

這種奇怪的行爲令我發狂。如果我上傳的網頁服務器上，我第一次打開它鉻/ Safari瀏覽器我得到這個問題：包含浮動子元素的元素的寬度自動問題

enter image description here

如果我刷新一下，或者當我工作在頁面上在本地，完全沒有問題。

enter image description here

的導航根本不擴大其寬度：汽車適合所有一個浮動元素。

這是非常簡單的代碼（我刪除了不相關的規則，但如果它可能是有用的，我使用web字體就知道了）：

HTML：

<nav> 
    <a href="#">button</a> 
    <a href="#">button</a> 
    <a href="#">button</a> 
    <div class="clear"></div> 
</nav>

CSS：

nav { 
    position: absolute; 
    top: 50%; 
    margin-top: -17px; 
    width: auto; 
    height: 33px; 
} 

nav > a { 
    box-sizing: border-box; 
    display: block; 
    float: left; 
    padding: 11px 13px; 
    height: 100%; 
    border: 1px solid #7a7e7f; 
} 

div.clear { 
    clear: both; 
}

來源

2013-10-25 Luke

能爲您提供的jsfiddle複製此問題，或鏈接到其他類型的現場演示？ –

更改此顯示：block;顯示：inline-block; –

請提供一個[小提琴]（http://jsfiddle.net）複製問題。 –

的資產淨值元件的寬度基本上設置爲100％的伎倆。這裏有一個優化的例子：

HTML

<nav> 
    <a href="#">button</a> 
    <a href="#">button</a> 
    <a href="#">button</a> 
</nav>

CSS

nav { 
    position: absolute; 
    top: 50%; 
    margin-top: -17px; 
    width: 100%; 
    overflow: hidden; /* Makes the clearing div obsolete */ 
} 

nav > a { 
    box-sizing: border-box; 
    float: left; 
    padding: 11px 13px; 
    border: 1px solid #7a7e7f; 
}

檢查出來的Codepen：http://codepen.io/zitrusfrisch/pen/Jcirx

來源

2013-10-25 19:17:01

包含浮動子元素的元素的寬度自動問題

回答

相關問題