2

我试图获得一个“跟随”文本的半透明背景：即背景不应该是一个矩形框，而是一个在每个换行符处停止的“锯齿状框”。

像这样：

文字背景是锯齿状的bo

我用以下风格做到这一点：

p {
  display: inline;
  background-color: rgba(0, 0, 0, 0.5); 

  font-family: "Montserrat";
  font-size: 18px;
  /* Add spacing between lines */
  line-height: 28px;
  /* Make sure background covers space between lines */
  padding-bottom: 6px;
}

可以在这里看到一个例子：http: //jsbin.com/texala/6

问题是 Firefox 和 Chrome 以不同的方式呈现这些。这两个浏览器使用完全相同的.woff字体（不是），并且尝试从cssreset.com 进行.woff2的所有不同重置仍然不起作用。

问题

您在这里可以看到，每行的背景在 Firefox 中是重叠的，但在 Chrome 中没有。

Chrome line-height + padding 渲染 Firefox 行高 + 填充渲染

我将 OS X 10.7.5 与 Firefox 35.0.1 和 Chrome 40.0.22.14.111 一起使用

我知道字体渲染因平台和浏览器而异，但以像素为单位明确设置了行高和字体大小（和填充）——这两种渲染中的一种不是错误的吗？

此外 - 有没有人解决这个问题，以便背景覆盖行之间的所有空间，在 Chrome 和 Firefox 中没有重叠？

4

2 回答 2

1

也许与其他线高？：

p {line-height: 158%;}
于 2015-02-06T21:28:28.613 回答
-2

在整个文档结构中定位 CSS 重置是关键。但是，具体来说，

p{display:inherit;text-align:justify};

编辑

阅读使用 EM 和 REM。它在各方面都优于像素。

p{line-height:1.61em};

于 2015-02-06T21:21:21.390 回答