盒装饰 - 休息的替代品

Question

是否有替代IE的box-decoration-break？

我的客户需要为IE提供工作解决方案，但IE不支持。

.class1 {
  display: inline;
  padding: 32px 20px 16px;
  margin-left: -20px;
  background-color: #000;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}

.class2 {
  color: #fff;
  display: inline;
  position: relative;
  z-index: 40;
  padding: 0;
}

<span class="class1">
   <h1 class="class2">Lorem Ipsum Ipsum</h1>
</span>

Answer 1

IE浏览器不支持box-decoration-break属性。您需要使用polyfill。 检查这个链接，它是一个用于盒子装饰 - 休息的polyfill，它可能会帮助你。 https://github.com/entepe85/decofill

Answer 2

“盒子阴影”是一个很好的选择。

blockquote span {
   font-size: 1.4em;
   line-height: 1.8em;
   display: inline;
   color: #fff;
   background: blue;
   box-shadow: 6px 0 0 5px blue, -6px 0 0 5px blue;
}

https://codepen.io/herrfischer/pen/xxKVKPo

支持会更好（IE 9）。