CSS解決方案用於刪除邊界從ul高度不使用calc（）

我正在使用Zurb基金會的頂部酒吧組件，並且我已嚮導航標記添加了1px和3px（頂部，底部）邊框。我遇到高度問題，因爲ul菜單裏面設置爲100％高度。CSS解決方案用於刪除邊界從ul高度不使用calc（）

減去4px高度的最有效方法是什麼？

我想避免CSS calc（）出於兼容性的原因，但我只是在尋找IE8 +的兼容性。我在question中看到了一條評論，其中引用了display: table，我試圖申請但沒有成功。

CSS添加到默認導航：

nav { 
    border-top: 1px solid #fff; 
    border-bottom: 3px solid #fff; 
    @include box-shadow(0 0 5px 0 hsla(0, 0%, 0%, 0.2)); 
}

UL身高CSS摘錄：

<section class="top-bar-section"> 
    <!-- Left Nav Section --> 
    <ul class="left"> 
    </ul> 

    <!-- Right Nav Section --> 
    <ul class="right"> 
    <li><a href="#">ABOUT</a></li> 
    <li><a href="#">WORK</a></li> 
    <li><a href="#">SERVICES</a></li> 
    <li><a href="#">CASE STUDIES</a></li> 
    <li><a href="#">CONTACT</a></li> 
    </ul> 
    </section>

來源

2013-09-22 jsuissa

嘗試使用'box-sizing：border-box;'。這使邊框和填充部分具有給定的寬度。 – Harry

@Harry這就是答案。只要將其張貼如此。 :) –

具有元素上使用box-sizing: border-box;：

.top-bar-section ul { 
    width: auto; 
    height: auto !important; 
    display: inline; 
    }

導航標籤中科HTML摘錄邊界。這使得border和padding部分給定height和width。

box-sizing的默認值爲content-box。在這種情況下，元素的實際渲染height是給定的高度+填充+邊框。

在此MDN Link中您可以找到有關box-sizing的更多信息。

編輯：改性width到height作爲問題是關於height。

來源

2013-09-22 11:16:44 Harry

謝謝！原來是一個溢出：可見問題，但你的回答是正確的，它幫助我找到了問題，因爲盒子尺寸設置正確。 – jsuissa

@ jsuissa：很高興知道它幫助:) – Harry

CSS解決方案用於刪除邊界從ul高度不使用calc（）

回答

相關問題