前几天遇到一个问题，一直没找时间把它记下来，今天终于抽出点时间来看看它！对于我来说，它是一个问题，也许是我之前对它理解不够深，所以才会走入陷阱，好了，言归正传，我们来看看这个问题。
首先，准备如下html内容：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试overflow与padding-right</title>
<style>
html, body, div {margin: 0; padding:0; border: 0 none}
.outer {background: https://csswang.com/ccc; width: 200px; padding: 50px; overflow: auto; height: 300px; margin:20px auto}
.inner {width: 250px; background: red}
</style>
</head>
<body>
<div class="outer">
outer
<div class="inner">
inner
</div>
</div>
</body>
</html>内容比较简单，我们来看看chrome下的效果：
不知各位看出什么名堂没？
外围div.outer的宽度为200px，也就是div.outer有200px的空间可以来存放内部元素或文本，对于任何超出的部分，使用overflow: auto，即出现滚动条。
现在内部元素div.inner的盒子宽度是200px(width) + 50px(padding-right)，这个时候div.outer应该容纳不下这么一个大元素，理论上，个人觉得应该出现滚动条。
但是，chrome却没有出现，ie8也没有出现滚动条，ie7却出现了滚动条（符合我的设想），firefox系列浏览器也没有出现滚动。
难道padding-right被忽略了？但是用开发工具看了一下盒子模型，完全正常，那是什么原因造成的呢？
在w3c官网上查查文档，结果找到了如下一段话：
Whenever overflow occurs, the &https://csswang.com/8216;overflow’ property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.
原来，并不是padding-right失效了，而是浏览器在应用overflow样式时，是剪切到了一个box的padding edge，内部元素的padding-right部分对于div.outer还是可见的（有点绕口令），所以浏览器不对padding-right部分出滚动条，因为浏览器不认为padding-right部分超出了div.outer的可视范围。
所以如果div.inner的盒子宽度 = width[div.outer + padding-right]，就会造成一种padding-right无效的错觉。
尽管w3c是如此解释，但我还是觉得应该出现滚动条才符合逻辑吧！！！
为了验证我的想法，我将内部元素换是一张图片，终于出现了想象中的滚动条，比如，我把div.outer改成如下代码：
<div class="outer">
<img src="test.png" width="250" height="93" />
</div>est.png为宽250px，高93px的图片，这个时候，chrome的渲染效果如下：
由以上的截图，可以看到，overflow仍然是剪裁到了padding-right edge上，但是div.outer出现了想象中的滚动条，我感觉这个才表现得符合逻辑。
到了这里，这个问题还没完，哎，真是郁闷，我们再来看看，如果img外面包多一层div，会是什么情况呢？
如下代码所示：
<div class="outer">
<div style="float:left"> <!--float是为了让img撑开这个div，使这个div的宽高与img一致-->
<img src="test.png" width="250" height="93" />
</div>
</div>啥都不用说，我们来看效果图：
我勒个去，不出所料，滚动条又没了！！！
小结
对于一个设置了width以及overflow的div.outer，如果div.inner的width值没有超过div.outer的width值，chrome等浏览器不会出现滚动条（div.outer无视padding值）；反之，则出现滚动条。
本文链接：» https://www.csswang.com/exp/3060
转载请注明本文来源出处。
