Html webkit中不需要的空白-Chrome中的线性渐变

我有一个div的以下样式：

.so-post-content-quote {
  background: -webkit-linear-gradient(0deg, transparent 0px, darkseagreen 0px), linear-gradient(135deg, transparent 30px, darkseagreen 20px), linear-gradient(225deg, transparent 0px, darkseagreen 0px), linear-gradient(315deg, transparent 30px, darkseagreen 0px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  padding: 50px 20px 50px 20px;
  font-size: 36px;
  color: white; 
}

这是HTML部分：

<div class="so-post-content-quote">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
</div>

“Lorem ipsum dolor sit amet，奉献精英。”

结果是：

---

如何将垂直空格固定在中心位置？这是我想要创建的形状，我可以创建，但是空白看起来很烦人。

找到了一个quck修复，如果您将

背景大小更改为51%：

css:

jsfiddle：
铬和铬的精细FF@dippas它在Firefox中运行良好，但上面的屏幕截图来自Chrome（不仅仅是在我的电脑上），你必须尝试调整浏览器窗口的大小吗？你有最新版本的Chrome浏览器吗？@JiiB它有时有效，有时无效。真奇怪。我有铬62.0.3202.89。我只测试了铬62。也许你必须检查其他浏览器
.so-post-content-quote-fix {
  background: linear-gradient(0deg, transparent 0px, darkseagreen 0px), linear-gradient(135deg, transparent 30px, darkseagreen 20px), linear-gradient(225deg, transparent 0px, darkseagreen 0px), linear-gradient(315deg, transparent 30px, darkseagreen 0px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 51% 51%;
  background-repeat: no-repeat;
  padding: 50px 20px 50px 20px;
  font-size: 36px;
  color: white; 
}