4

「一歩一歩」を作ろうとしていますが、クロムとFFのピクセルの違いに問題があります。

したがって、すべてのステップは動的であり、中間にある必要があります。5 つのオプションが 2 つ、3 つしか表示されない場合もあります。そのため、ラッパーの最後に到達するために、両側にサブラインを作成しています。

この行が問題です。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

ご覧のとおり、FF の緑色の線は、ステップの途中で灰色の線と交差しています。

4

1 に答える 1

1

さて、私は（コメントした他の多くの人と同じように）私のChromeとFirefoxの間にあなたが示したのと同じ違いは見られませんでした.

ただし、ブラウザーでズームインおよびズームアウトすると、行の奇妙な動作に気付きました。これにより、あなたのコードをより注意深く見るようになりました。いくつかの違い (および私たち全員にとっての矛盾) が見られる理由は、行の配置方法にあると感じています。この fiddle に見られるように、次の変更をお勧めします(すべてのコードではなく、それらのみに注意します) 。これにより、問題が解決する可能性があります。

説明

はvertical-align通常bottom、デフォルトで oninline-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 に答える