Html Firefox div背景比边框宽1px，但仅具有特定的内容长度_Html_Css_Firefox

Html Firefox div背景比边框宽1px，但仅具有特定的内容长度

html css firefox

Html Firefox div背景比边框宽1px，但仅具有特定的内容长度,html,css,firefox,Html,Css,Firefox,我使用向用户显示消息时遇到问题。这是非常基本的东西。但在FireFox中，背景有时比边框宽。请参阅附件中的图像。除内容外，这三个块完全相同，但只有中间的一个块右侧有额外的1px 首先，我认为这与引导有关。但问题仍然存在，有一个非常基本的页面。有没有人可以快速修复，或者我是否需要使用父容器并完全重写消息代码。尝试使用字体大小、填充等进行试验，但当显示不同的文本长度时，它就会出现我使用FirefoxV81.0 <!doctype html> <html> <body

我使用

向用户显示消息时遇到问题。这是非常基本的东西。但在FireFox中，背景有时比边框宽。请参阅附件中的图像。除内容外，这三个块完全相同，但只有中间的一个块右侧有额外的1px

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

我使用FirefoxV81.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>


.vdwwd_消息{
字体系列：Verdana；
填充：15px；
字号：1rem；
字体大小：粗体；
位置：固定；
最高：23%；
左：50%；
最小宽度：400px；
最大宽度：800px；
转换：转换（-50%，0%）；
背景色：#fce7e7；
边框：8px实心#bf1616；
-moz框大小：边框框；//不执行任何操作
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

不同的内容宽度

<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>


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX xx
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

也许放下

位置

变换

可以避免这些bug渲染和未来的麻烦

grid

可以选择将每个框从上一个框的顶部设置为100px，而有缺陷的一像素bg将消失

正文{
背景色：#181818；
显示：网格；
网格自动行：100px；
}
.vdwwd_消息{
字体系列：Verdana；
填充：15px；
字号：1rem；
字体大小：粗体；
宽度：最大含量；
保证金：自动；
最大宽度：800px；
背景色：#fce7e7；
边框：8px实心#bf1616；
}


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

outline:1px固体#bf1616？或长方体阴影：0 1px#bf1616@TemaniAfif，添加1px的轮廓或仅添加

outline:8px solid#bf1616而不是边框修复了该问题。谢谢我仍然怀疑这是否是一个firefox bug…不是真正的bug，而是亚像素渲染。你一生中至少要面对一次