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该关键字使裁剪与填充框相关。

content-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

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18