4

我正在尝试“一步一步”，但我遇到了一些与chrome和FF之间的像素差异有关的问题。

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

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

我遗漏了一些东西，或者在这种情况下，我们应该做一个“解决方法”？

如果您在这里看到实际操作会更简单：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 中的绿线与台阶中间的所有灰线交叉。

4

1 回答 1

1

好的，我（就像许多评论的其他人一样）没有看到您在我的 Chrome 和 Firefox 之间显示的相同差异，并且这两种浏览器都没有像您在图片中显示的那样为我表现。

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

解释

vertical-align通常bottom默认情况下是 on ，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 */
}
于 2012-12-07T20:17:11.090 回答