CSS寬度不匹配在

頁

我有包含在一個更大的如下：CSS寬度不匹配在

<div class="content-container"> 
    <div id="content"> 
    Bunch of text ... omitted 
    </div> 

    <div id="sidebar"> 
    </div> 
</div>

對應於這兩個是CSS如下（略編輯的長度）：

#content { 
margin: 0; 
padding: 15px; 
width: 720px; 
height: 100%; 
position: absolute; 
left: 0; 
border-left: solid; 
overflow: auto; 
} 

#sidebar { 
margin: 0; 
padding: 15px; 
width: 198px; 
position: absolute; 
right: 0; 
height: 100%; 
background-color: white; 
border-style: solid; 
} 

.content-container { 
position: relative; 
width: 978px; 
height: 1060px; 
}

我有read寬度屬性不包括填充。當我在Chrome中加載頁面並檢查元素時，content的寬度爲705，而不是期望的720.但是，sidebar的寬度爲198px。有沒有人有解釋？

來源

2015-12-31 Abundance

我得到720.你能檢查是否有其他的東西覆蓋它嗎？ https://jsfiddle.net/5xdg4qmw/ – cweitat

是的，它應該給720，我認爲這個問題是獨佔我的網頁。但是這很奇怪，因爲如果寬度被覆蓋，chrome通常會顯示一條被刪除的線。不知道在哪裏檢查。 – Abundance

你有它可以檢查的活網站嗎？謝謝或者你可以包括所有你的CSS在小提琴 – cweitat

沒有人有一個解釋？

這是因爲滾動條（從overflow: auto產生）。

存在一些與滾動條相關的跨瀏覽器不一致問題，以及它如何包含在寬度計算中。在Chrome和Safari中，滾動條的寬度不包含在內容寬度中，而在Firefox和IE中，滾動條的寬度爲，包含在內容寬度中。

在您提供的jsFiddle示例中，您將注意到在移除滾動條後Chrome中的內容寬度爲717px。使用滾動條時，將從內容寬度中減去15px（導致702px）。

來源

2015-12-31 03:47:38

嘗試清除父DIV任何可能違約保證金或填充：

.content-container { 
    margin:0px; 
    padding:0px; 
}

來源

2015-12-31 03:03:09

謝謝，但沒有解決問題 – Abundance

CSS寬度不匹配在

回答

相關問題