Firefox div 背景比边框宽 1px，但只有特定的内容长度答案

【问题标题】：Firefox div background 1px wider than border, but only with certain content lengthsFirefox div 背景比边框宽 1px，但只有特定的内容长度
【发布时间】：2020-10-02 04:17:35
【问题描述】：

我在使用 <div> 向用户显示消息时遇到问题。这是非常基本的东西。但在 FireFox 中，背景有时会比边框宽。见附图。这三个块除了内容完全一样，只是中间的块右边多了1px。

首先我认为它与 Bootstrap 有关。但是问题仍然存在，页面非常基本。有没有人快速修复或者我需要使用父容器并完全重写消息代码。尝试尝试字体大小、填充等，但当显示不同的文本长度时，它只会出现。

我使用 FireFox v 81.0

<!doctype html>
<html>
<body style="background-color: #181818">

    <style>
        .vdwwd_messages {
            font-family: Verdana;
            padding: 15px;
            font-size: 1rem;
            font-weight: bold;
            position: fixed;
            top: 23%;
            left: 50%;
            min-width: 400px;
            max-width: 800px;
            transform: translate(-50%, 0%);
            background-color: #fce7e7;
            border: 8px solid #bf1616;

            -moz-box-sizing: border-box; //does nothing
        }
    </style>

    <div class="vdwwd_messages">
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </div>

    <div class="vdwwd_messages" style="margin-top: 100px;">
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxx xxxx
    </div>

    <div class="vdwwd_messages" style="margin-top: 200px;">
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxx xxxx xx
    </div>

</body>
</html>

不同的内容宽度

<div class="vdwwd_messages">
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>

<div class="vdwwd_messages" style="margin-top: 100px;">
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xx
</div>

<div class="vdwwd_messages" style="margin-top: 200px;">
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxx
</div>

【问题讨论】：

轮廓：1px 实心#bf1616; ?
或 box-shadow:0 0 0 1px #bf1616; ?
@TemaniAfif，添加 1px 的轮廓或仅添加 outline: 8px solid #bf1616; 而不是边框可以解决问题。谢谢！我仍然想知道这是否是一个 Firefox 错误...
不是真正的错误，而是亚像素渲染。你一生中至少要面对一次

标签： html css firefox

【解决方案1】：

也许放弃position + transform 将避免那些错误呈现和未来的头痛。

grid 可以将每个框设置为距前一个框顶部 100px 的位置，这样错误的 1 像素 bg 就会消失。

body {
  background-color: #181818;
  display:grid;
  grid-auto-rows:100px;
}
.vdwwd_messages {
  font-family: Verdana;
  padding: 15px;
  font-size: 1rem;
  font-weight: bold;
  width:max-content;
  margin:auto;
  max-width: 800px;
  background-color: #fce7e7;
  border: 8px solid #bf1616;
}

  <div class="vdwwd_messages">
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  </div>

  <div class="vdwwd_messages" >
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxx xxxx
  </div>

  <div class="vdwwd_messages" >
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxx xxxx xx
  </div>

【讨论】：