的上下文

Question

的上下文

我正在使用ASP.NET Core和Bootstrap 3开发一个网站，我遇到了一个让我完全陷入困境的问题。我一直在敲打大约一个半小时，最后决定我需要一些专家建议。

我面临的问题是（相似的）HTML元素的显示不一致。

你看到那个微小的偏移吗？它在中间牌上，但不在另外两张牌上。该元素之间的差异是半个像素这些小错误遍布整个结果列表，尽管HTML是相同的（因为它们是由foreach循环生成的）。请注意，元素的顶部是一致的，所以实际上它的高度是不同的。

为了让事情变得更有趣，它不会发生在每张卡上，而且只会出现在Firefox中。（在Chrome上测试过，EdgeI一直在尝试识别一个模式进行故障排除，但到目前为止我已经卡住了。

的代码

这些游戏结果卡由以下内容组成：

边框/边距的父div
还有三个子元素：

- 联盟结果（左侧的得分和名称）

- 垫片（使用CSS triangles制作）

- 敌人的结果（得分和右边的名字）

对于code itself，有一个foreach循环遍历ViewModel中的每个游戏结果，并为每个游戏执行此操作：

@if (battle.GetTeam() == 1)
{
  <div class="game-result-card" id="accordion">
     <div class="team-result team-result-ally team-result-red">
        <h2>@battle.score</h2>
        <h3>@battle.primaryCompany</h3>
     </div>
    <div class="game-result-spacer-red-active"></div>
     <div class="team-result team-result-enemy team-result-blue">
        <h2>@battle.enemyScore</h2>
        <h3>@battle.enemyHeader</h3>
     </div>
   </div>
 }
else
{
    <div class="game-result-card" id="accordion">
        <div class="team-result team-result-ally team-result-blue">
            <h2>@battle.score</h2>
            <h3>@battle.primaryCompany</h3>
        </div>
        <div class="game-result-spacer-blue-active"></div>
        <div class="team-result team-result-enemy team-result-red">
            <h2>@battle.enemyScore</h2>
            <h3>@battle.enemyHeader</h3>
        </div>
    </div>
}

所以基本上，“if”只是决定它是左边的红牌还是蓝卡。最后，我得到了以下CSS elements applied（除了Bootstrap中包含的任何内容。）

.body-content {
max-width: 600px;
align-items: center;
}

...(removed extraneous things)...

.game-result-card {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 116px;
    border: 4px solid #000000;
    box-shadow: 5px 5px 5px #333333;
    margin-bottom: 36px;
}

.team-result {
    color: #ffffff;
    text-align: center;
    height: 110px;
    width: 40%;
    border: 0;
}

.team-result h2 {
    font-size: 40px;
    margin: 0px 0px 0px 0px;
    padding: 8px 0px 0px 0px;
}

.team-result h3 {
    font-size: 16px;
}

.team-result-red {
    width: 50%;
    background-color: firebrick;
}

.team-result-blue {
    width: 50%;
    background-color: darkslateblue;
}


.game-result-spacer-red-active {
    width: 0;
    height: 0;
    border-bottom: 110px solid darkslateblue;
    border-left: 110px solid firebrick;
}

.game-result-spacer-blue-active {
    width: 0;
    height: 0;
    border-bottom: 110px solid firebrick;
    border-left: 110px solid darkslateblue;
}

我到目前为止所做的事

我研究的主要解决方案是调整元素上的像素宽度，以查看是否有不同的值影响它，或者是否使用基于％的宽度修复它。那里没有豆子。

我还尝试使用Firefox的Inspector（F12菜单）来验证元素的大小（高度和宽度）。他们是。

我还尝试使用F12菜单编辑元素，使它们具有相同的内容 - 理论是文本宽度会略微增加。然而，似乎没有任何工作。（Imgur专辑更好地描述了这一点）[https://imgur.com/gallery/zRmCk#]

有趣的数据点，当我在屏幕上放大200％（3200 x 1800分辨率）时，问题就消失了。这让我觉得它与宽度有关，但前面两件事没有找到解决方案。

最后，我发现了这个Stack Overflow（关于类似偏移问题的问题，）{Absolutely-positioned table header (th) - which browser is wrong?，但它似乎只与折叠边框元素有关。

我的理论是，这是与Firefox相关的某种类似的舍入错误，但是当我将父div的border元素移动到4px而不是3时（似乎是偶数），似乎没有任何改变。

的 TL; DR

总结一下这个巨大的帖子，我只会在Firefox中出现不一致的半像素偏移。虽然我最终都在寻找解决方案，但我对这背后的“原因”更感兴趣。

Answer 1

我能够通过将Firefox缩放到130％（以及其他一些更大的尺寸）来重现这个问题。

将height和.game-result-spacer-blue-active上的.game-result-spacer-red-active设置为110px似乎可以排成一行。

或者您可以将.team-result类与其他2类一起更改为100％高度

或者只是尝试不同的方法来使对角线外观工作而不是使用边框。我想Firefox会以不同的方式计算div和边界的缩放比例，并因此而以某种方式结束。我不完全确定它正在做什么导致这种情况发生的细节。

Firefox中相同HTML元素上的半像素偏移不一致

的上下文

的代码

我到目前为止所做的事

的 TL; DR

1 个答案: