css - 箱体装饰破溢

Question

盒子装饰破损和溢出有问题。这是一个 fiddle 来说明我的问题:https://jsfiddle.net/n56226na/3/

span {
  display: inline;
  padding: 7px 20px;
  background: #000;
  color: #fff;
  font-size: 18px;
  line-height: 40px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
} 

基本上，我需要根据设计对文本进行装箱和填充。问题是在浏览器调整大小时，框总是向右溢出(并且离开页面)，而由于居中对齐，左侧被很好地填充。这是一张图片来说明我的问题:

在理想的世界中，span 将居中对齐，带有黑框白色文本，但不会溢出它的父 div。不确定这是否可能。感谢任何想法。

Answer 1

我问了一个similar question经过一些研究并从其他用户的建议中汲取灵感，我找到了可能的解决方案。

首先，在this page您可以使用许多不同的方法找到一些可能的解决方案。

“实际上”(浏览器支持随时间变化)的最好方法是结合引用的“Fabien Doiron 的框阴影方法”并稍加修改以仅解决Firefox 32+ 的特定行为。

你的 updated jsFiddle有以下具体规则:

span {
    display: inline;
    padding: 7px 0;
    background: #000;
    color: #fff;
    font-size: 18px;
    line-height: 40px;
    box-decoration-break: clone;

    box-shadow: 10px 0 0 #000, -10px 0 0 #000;
}

我添加了多个 box-shadow 来模拟横向填充(重置您的原始填充声明)。

无论如何，有必要添加 box-decoration-break: clone; 来覆盖默认具有 box-decoration-break: split; 的特定 Firefox 32+ 行为.

请注意，我只留下了 box-decoration-break: clone; 因为只有 FireFox 才需要。

相反，您(实际上)必须删除模拟特定的 Chrome 变体，-webkit-box-decoration-break: clone; 因为它是造成您不需要的水平溢出的原因在窗口调整大小。

因此，由于 Chrome 需要此属性的供应商前缀，因此仅使用标准语法声明它是一种解决方法，即使在 Chrome 和 IE9+ 中也能正常运行