overflow-clip-box
非标准
这个功能是非标准的，不在标准轨道上。不要在面向Web的生产站点上使用它：它不适用于每个用户。实现之间也可能存在大的不兼容性，并且行为在未来可能会改变。
该overflow-clip-box CSS属性指定相对于该框时存在溢出时发生的裁切。
/* Keyword values */
overflow-clip-box: padding-box;
overflow-clip-box: content-box;
/* Global values */
overflow-clip-box: inherited;
overflow-clip-box: initial;
overflow-clip-box: unset;
注：在Gecko中，默认情况下，padding-box在任何地方都可以使用，但<input type="text">类似的使用该值content-box。在Firefox 29之前，这种行为是硬编码的; 从那时起它使用这个属性，可以在别处使用。请注意，该属性仅在UA样式表和chrome上下文中被默认激活。
| Initial value | padding-box |
|---|---|
| 应用对象 | all elements |
| 是否可继承 | no |
| 媒体 | visual |
| 计算值 | as specified |
| 动画类型 | discrete |
| 规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
padding-box该关键字使裁剪与填充框相关。
形式语法
padding-box | content-box
实例
填充盒
HTML
<div class="things">
<input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box">
<div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div>
</div>
CSS
.scroll {
overflow: auto;
padding: 0 30px;
width: 6em;
border: 1px solid black;
background: lime content-box;
}
.padding-box {
overflow-clip-box: padding-box;
}
HTML
function scrollSomeElements() {
var elms = document.querySelectorAll('.scroll'
for (i=0; i < elms.length; ++i) {
elms[i].scrollLeft=80;
}
}
var elt = document.queryElementsByTagName('body')[0];
elt.addEventListener("load", scrollSomeElements, false
结果
规范
此属性已提交给W3C CSSWG; 它还没有在标准轨道上，但如果被接受，应该出现在CSS Overflow Module Level 3。
浏览器兼容性
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 29.0 (29.0)1 | No support | No support | No support | No support |
| Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 29.0 (29.0)1 | No support | No support | No support | No support |
