Question

我对最新的IE和Chrome浏览器上呈现的奇怪内容有疑问。我有一个div应该跨越100％的父母。笨拙地，我给了它 - 宽度：100％px;作为CSS属性。这是我的整个项目：

.loc_vendiv{
    position: relative;
    margin-top: 5px;
    left: 0px;
    width: 100%px;
    height: 120px;
    border: 1px solid #333;
    background-color: #fff;
}

奇怪的是 - 完美无缺。所以，我今天才注意到这是错误的。不想要一个丑陋的样式表，我从最后删除了px。并且... div是两个像素太宽。有关为什么会发生这种情况的任何解释？这是父div：

#loc_catlist{
    position: absolute;
    width: 612px;
    height: 720px;
    top: 50px;
    left: 0px;
    background-color: #eee;
    overflow-y: auto;
    overflow-x: hidden;
}

我有点恼火，因为糟糕的代码可行，但正确的代码并不能满足我的需求。不过，我认为我不能离开它。我不喜欢这样的小打嗝...

Answer 1

这是因为你的边界。尝试添加：

box-sizing: border-box;

到您的.loc_vendiv课程，它会占用边框。

Answer 2

浏览器通常会忽略无效的css规则，例如A B C D E，这意味着要获得错误的样式。你只需要删除宽度规则。

Answer 3

2px太宽可能是因为除了1px的边框（宽度加上2px宽度）之外你的宽度为100％。

修复可以在这里找到＃34; Paul Irish＆＃34;关于 box-sizing

Answer 4

当宽度值错误（100％px;）时，浏览器会忽略CSS的这一部分。如果删除了css的这一部分，结果将是相同的。

关于2个额外像素，这是因为边界设置为div.loc_vendiv。

div.loc_vendiv的宽度等于div＃loc_catlist的宽度，并添加边框值（左边框为1px，右边框为1px = 2px）。

请记住，当填充创建内部空间时，边框宽度会添加到对象的大小。

CSS - 100％px解决了我的问题吗？

4 个答案: