在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

overflow-clip-box CSS property specifies relative to which box the clipping happens when there is an overflow. It is short hand for the overflow-clip-box-inline and overflow-clip-box-block 特性。

/* Keyword values */
overflow-clip-box: padding-box;
overflow-clip-box: content-box;
/* Two values */
overflow-clip-box: padding-box content-box;
overflow-clip-box: content-box content-box;
/* Global values */
overflow-clip-box: inherit;
overflow-clip-box: initial;
overflow-clip-box: unset;
					

注意 : On Gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box . Prior to Firefox 29, this behavior was hardcoded; since then it uses this property that can be used elsewhere too. Note that this property is activated by default only in the UA stylesheet and chrome contexts.

初始值	padding-box
适用于	所有元素
继承	no
Media	visual
计算值	如指定
动画类型	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

句法

值

padding-box

This keyword makes the clipping be related to the padding box .

content-box

This keyword makes the clipping be related to the content box .

形式句法

padding-box | content-box
					

范例

padding-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;
}
					

JS

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);
					

结果

规范

This property has been proposed to the W3C CSSWG; it is not yet on the standard track but, if accepted, should appear in CSS Overflow Module Level 3 .

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.