所以，我有一个DIV #Wrapper具有固定的宽度。 内部的DIV，我还有一个DIV #Panel其中也有一个固定的宽度：
<div id="Wrapper">
<p>...</p>
<div id="Panel">Panel</div>
<p>...</p>
</div>
有时，面板的宽度比与包装物的大，在这种情况下，我想通过JavaScript扩大包装，使其包装的面板完美。
现场演示： http://jsfiddle.net/H6rML/
我打算用.scrollWidth在包装上，以确定面板的宽度。 然而，问题是，包装有水平填充，和.scrollWidth由于某种原因，只包括包装的左填充。 所以：
Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width
因此，考虑到：
#Wrapper {
width: 200px;
padding: 10px;
}
#Panel {
width: 300px;
}
Wrapper.scrollWidth返回310px ，这是不是非常有用。 如果.scrollWidth不包括任何填充，只返回面板的宽度，我可以与工作（我将手动添加填充到该值）。 如果两个垫衬都包括在内，我可以与工作了。 但是，为什么只包括左填充？ （顺便说一句这种行为似乎是跨浏览器）。
一些其他注意事项：
我不能直接设置在包装的宽度。 在我实际的代码，我设置的是包装几个级别以上的祖先元素的宽度，我用一个自定义的API来设置宽度。 这就是为什么我需要检索的全部320px值。
我想，不依赖于包装的内容的解决方案。 在我演示它是一个小组，但在其他情况下有可能是溢出，甚至是多个元素不同的元素。 这就是为什么我去.scrollWidth的包装。
有没有一种方法来获取值320px ，而无需正确的填充手动添加到.scrollWidth价值？
顺便说一句，根据标准，该右填充应包括：
该scrollWidth属性必须返回运行这些步骤的结果：
如果元素没有任何关联的CSS布局框返回零，并终止这些步骤。
如果该元素是根元素和文档不处于特殊模式返回最大值（文档内容宽度，innerWidth的值）。
如果该元素是HTML体元件和所述文献在特殊模式返回最大值（文档内容宽度，innerWidth的值）。
返回“填充左”属性的计算值，加上的“填充-右”的计算值，加上元素的含量宽度。
来源： http://www.w3.org/TR/cssom-view/
为什么不浏览器的行为相应的？
为了进一步提高我的文章的清晰度，让我总结两个主要问题：
（1）如果正确的填充应该被包含在标准状态.scrollWidth价值，那么我们为什么不浏览器相应的行为？
（2）是否有可能获取正确的值（ 320px在我的情况），而无需手动添加右填充？
这个问题已经回答了在另一个线程
回答这个问题，就设在这里： 当一个子元素水平溢出，为什么父的右填充忽略？
我不知道如果我理解正确的，但是从我读，我想你想改变基于#Panel #wrapper指定的宽度。 在这种情况下，也许你可以尝试以下方法：
#Wrapper {
display: inline-block;
make sure to remove width from #Wrapper
}
试试这个：
#Wrapper {
min-width: 200px;
padding: 10px;
float: left;
}
或使用jQuery
$(document).ready(function() {
var width = jQuery("#Panel").width();
$("#Wrapper").width(width);
});
您可以使用jQuery来做到这一点：
$(function() {
$("#Wrapper").width($("#Panel").outerWidth());
});
这是考虑到#Panel的填充，边距等
我不知道为什么领先的浏览器分享这一错误，直到今天，但现在的问题是和演示inline-block解决方法 。
document.body.innerHTML += 'one.scrollWidth = '+ document.querySelector('.one').scrollWidth +'<br>two.scrollWidth = '+ document.querySelector('.two').scrollWidth +'<br>three.scrollWidth = '+ document.querySelector('.three').scrollWidth +' (fix applied to grand children)<br>four.scrollWidth = '+ document.querySelector('.four').scrollWidth +' (fix applied to direct child)';
.parent{ border:1px solid rgba(50,150,220,1); } .child{ background:rgba(100,200,255,0.3); padding:10px 20px; white-space:nowrap; } .scroll-container{ border:1px solid red; display:inline-block; overflow:hidden; } .two, .three, .four{ width:60px; } .three .child{ display:inline-block; } .four .parent{ display:inline-block; }
<div class="scroll-container one"> <div class="parent"> <div class="child">Lorem ipsum dolor</div> <div class="child">Lorem ipsum dolor sit amet</div> </div> </div> <br> <div class="scroll-container two"> <div class="parent"> <div class="child">Lorem ipsum dolor</div> <div class="child">Lorem ipsum dolor sit amet</div> </div> </div> <br> <div class="scroll-container three"> <div class="parent"> <div class="child">Lorem ipsum dolor</div> <div class="child">Lorem ipsum dolor sit amet</div> </div> </div> <br> <div class="scroll-container four"> <div class="parent"> <div class="child">Lorem ipsum dolor</div> <div class="child">Lorem ipsum dolor sit amet</div> </div> </div> <br>
