Firefox中的多行标题/背景颜色

Question

所以我想要一个背景颜色和行之间有间隙的多行标题。我在Chrome / Safari / IE9 +中使用了一些css hacks，但Firefox拒绝正确显示它。在新行的开头，span元素应该有一个左边框。 FF确实显示边框，但缺少背景颜色。

我知道<br> h1/span内部h1有点难看，但我需要调整换行符，并且多个{{1}}标签更糟糕。

JSFiddle：http://jsfiddle.net/hLL7100q/

谢谢！

Answer 1

对于现代浏览器，有一个名为＆＃34; box-decoration-break＆＃34;的属性。所以你的代码应该是这样的：

<强> CSS

{{1}}

对于内联元素的

Support是可以的，但不是压倒性的。

更新了JSFiddle：http://jsfiddle.net/hLL7100q/56/

Answer 2

这样改变。

h1 span {
  box-shadow: 17px 0 0 #000, 0px 0 0 #000;
  background-color: #000;
}

我认为这会对你有所帮助。

Answer 3

负框阴影值会导致此问题。您可以简单地避免此问题更改此属性 -

box-shadow: 17px 0 0 #000, 0px 0 0 #000;

Answer 4

试试这个

<h1>
    <span>supertest<br></span>
      <span>  headline with<br></span>
      <span>  a lot of words</span>
</h1>

它可以正常工作

---

如果您真的认为上面的代码不起作用，请尝试使用br标签。

HTML

<h1>
 <div>
    <span>
        supertest
        headline with
        a lot of words
        </span>
 </div>
</h1>

CSS

h1 span {
    box-shadow: 17px 0 0 #000;
    background-color: #000;
}
div{
    width:200px;
}