html - Chrome 和 FF 之间的像素差异

Question

我正在尝试制作“一步一步”，但我遇到了一些关于 chrome 和 pixel 差异的问题FF。

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

这条线就是问题所在，它们使我们的 1 个像素相差 2。

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

如果你看到这里的实际操作会更简单:jsfiddle

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

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;
}   ​

打印:

如你所见，FF 中的绿线跨越了台阶中间的所有灰线。

Answer 1

好吧，我(就像许多其他发表评论的人一样)没有看到您在我的 Chrome 和 Firefox 之间显示的相同差异，而且这两种浏览器都没有像您在图片中显示的那样对我起作用。

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

解释

在 inline-block 上，vertical-align 通常是 bottom，因为您要定位 .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 */
}