【发布时间】：2017-12-07 21:28:23
【问题描述】：
我遇到了一个问题，即当 CSS 网格中的某些文本具有一定数量的字符时，它会添加一条虚线。这是我第一次使用 CSS 网格，我怀疑它与网格有关。我在 Chrome 和 Safari 中看到了这个问题（使用 Mac OS X），但在 Firefox 中没有。
.grid {
display: grid;
border: 1px solid black;
}
.grid > .row {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.col-10 {
grid-column-end: span 10;
}
.blue {
background-color: blue;
}<div class="grid">
<div class="row">
<div class="blue col-10">
You must create an account first! See site admin for help.
</div>
</div>
</div>
<div class="grid">
<div class="row">
<div class="blue col-10">
You must create an account first! See site admin for help..
</div>
</div>
</div>基本上，一条幽灵线被添加到You must create an account first! See site admin for help，导致<div class="col-10 col-offset-1"> 与它有两条线而不是一条线一样高。文本离行尾不远，调整窗口大小没有区别（直到它足够窄以实际导致换行）。如果我在短语中添加两个额外的字符，幽灵线就会消失。如果我继续添加字符，鬼线会在某些点重新出现，然后随着下一个字符再次消失。一旦我添加了足够的文本以分成两行，问题似乎不再出现，所以它似乎只发生在单行文本上。
即使文本离行尾还很远，但它似乎是一个换行问题，当我添加white-space: nowrap; 时它确实消失了。
知道是什么原因造成的吗？是 Chrome 和 Safari 的错误，还是我的 HTML 和 CSS 有问题？
编辑
感谢建议的编辑，添加了代码 sn-p 来说明问题。我能够在保持问题的同时消除外部网格，因此我更新了代码以将其删除。您现在看到的是两个相同的 div，除了一个在末尾有一个额外的句点。在我的浏览器 (Chrome) 中，我的第二个 div 更短，即使它有一个额外的字符。
编辑 2
当我在 Safari 中使用代码 sn-p 时，我实际上遇到了不同版本的问题。正如我所说，在 Chrome 中，它似乎是基于字符总数的。我可以添加一个角色，幽灵线消失，然后我删除角色，这条线又出现了。但在 Safari 中，我发现实际上只要文本中有多个空格字符，就会出现鬼线，无论文本有多短或多长。
再一次，Firefox 完全没有问题。它完全按照我的预期显示文本。
【问题讨论】：
-
那么你在网格内部创建一个网格......这是故意的吗？
-
是的。这是气馁吗？
-
我不确定我会说这是鼓励还是不鼓励，因为这取决于您想要的布局。然而，这肯定是相当不寻常的。不要忘记你的内部
grid有padded类，它增加了额外的“高度”。当您认为元素太高时，这可能就是您所看到的。 -
绝对不是填充。我可以在浏览器中编辑文本并在添加几个字符后查看高度下降。然后我可以删除一个字符，高度再次增加。我还可以检查元素并查看容器填充和文本高度之间的差异。有一些幽灵空间没有考虑到。
-
过去 20 天内我第二次看到这个问题出现。它似乎是 Chrome / Safari 中的一个错误。这是另一种情况：stackoverflow.com/q/47399313/3597276