Question

我正在努力制作一个“一步一步”，但我正在解决 chrome 之间的像素差异的问题的 FF

所以，所有步骤都是动态的，应该在中间，有些时候只能出现两个，三个我们的5个选项，这就是为什么我为每一方制作一个子行，到达包装器的末尾。

这条线是问题，它们使我们的像素差异为2。

我错过了什么，或者在这种情况下，我们应该制作一个“解决方法”？

如果你在这里看到实施，那么

对于那些想直接在这里看到代码的人：

HTML：

<article id="people-add">
<nav>
    <div class="step-wrapper">
        <div class="base-left-line"></div>

        <div class="step first-step">
            <div class="active-stepc step-circle"></div>
            <span class="step-label">
                Step 1
            </span>
        </div>
        <div class="step">
            <div class="step-line"></div>
            <div class="step-circle"></div>
            <span class="step-label">
                Step 2
            </span>
        </div>
        <div class="step">
            <div class="step-line"></div>
            <div class="step-circle"></div>
            <span class="step-label">
                Step 4
            </span>
        </div>
        <div class="step">
            <div class="step-line"></div>
            <div class="step-circle"></div>
            <span class="step-label">
                Step 5
            </span>
        </div>

        <div class="base-right-line"></div>
    </div>
</nav>
</article>

和css：

#people-add {
    float: left;
    width: 100%;
}

#people-add nav {
    padding: 5px 0 60px 0;
}

.step-wrapper {
    float: left;
    width: 100%;
    text-align: center;
    position: relative;
}

.step {
    display: inline-block;
    position: relative;
    width: 120px;
}

.first-step {
    width: 0 !important;
}

.step .step-label {
    position: absolute;
    right: -35px;
    bottom: -30px;
    font-size: 12px;
    width: 96px;
    text-align: center;
    font-weight: bold;
    color: #818181;
}

.step .step-line {
    border-bottom: solid #E5E5E5 2px;
    position: absolute;
    right: 5px;
    top: -2px;
    z-index: 12;
    width: 120px;
}

.step .step-circle {
    background-color: #B3B3B3;
    border: solid 4px #E5E5E5;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    position: absolute;
    right: -1px;
    top: -15px;
    z-index: 13;
}

.base-left-line, 
.base-right-line {
    position: absolute;
    width: 50%;
    top: 12px;
    z-index: 1;
}

.base-left-line {
    border-bottom: 2px solid #9BBD5E;
    left: 0;
}

.base-right-line {
    border-bottom: 2px solid #9BBD5E;
    right: 0;
}

打印：

Chrome

正如你所看到的，FF中的绿线正在跨越阶梯中间的所有地方。

Answer 1

好吧，我（就像许多评论过的人一样）没有看到你在我的Chrome和Firefox之间显示的相同差异，并且当你在图片中显示所需时，浏览器都没有表现出来。

然而，我确实注意到当我在浏览器中放大和缩小时线条的一些奇怪行为。这让我更仔细地看你的代码，我觉得你看到一些差异（以及我们所有人的不一致）的原因是因为你如何定位线条。我推荐以下更改（我只记下那些，而不是所有代码），as seen in this fiddle，这可能会解决您的问题。

<强>解释

vertical-align默认情况下bottom通常为inline-block，因为您将.base-[left/right]-line元素定位在top位置，所以最好对.step中旨在与这些元素重叠的元素执行此操作。所以......

添加

.step { vertical-align: top; /* ADDED THIS so that dimensions come from the top */ }

更改

.step .step-label { bottom: -45px; /* CHANGED THIS for the vertical align top */ } .step .step-line { top: 12px; /* CHANGED THIS, which now matches offset of the baselines */ } .step .step-circle { top: 0; /* CHANGED THIS */ }

Chrome和FF之间的像素差异

1 个答案: