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宽度不匹配在

回答

相关问题