2

よくわからないやり取りをしています。data-* 属性に基づいて情報を表示する進行状況バー (真剣に、標準全体 をまだ実装できますか?) を作成しているので、ラベルを表示するために :before と :after を使用しています。

私はフィドルでそれを持っています：http://jsfiddle.net/WtrfL/

HTML:

<div class="wrap">
    <div class="inner">
    </div>
</div>

スタイル:

.wrap {
    width:500px;
    height:2em;
    border:1px solid black;
}

.wrap:before {
    content:"1";
    float:left;
    border:1px solid black;
}

.wrap:after {
    content:"2";
    float:right;
    border:1px solid black;
}

.inner {
    width:30%;
    height:100%;
    background-color:#DDD;
    border:1px solid #888;
}

残念ながら、私はこれが起こっています：

外側のバー、内側のバー、左上に 1 が浮いているボックス、右側に浮いている外側のバーの下に 2 があるボックスを示す図

[2] はメイン バーの下ではなく、メイン バーの内側にあると思います。

Windows の IE9 と Chrome 27 で同じ動作が見られるので、レンダリング エンジンのバグではなく、これらの動作方法を誤解していると確信しています。

元気？何か案は？私はハックが得意です。これは現在のプロトタイプにすぎません。

4

1 に答える 1

1

疑似要素でフロートを使用することはありません。私はそれらを絶対に位置づけます。このようなもの：

.wrap {
    width:500px;
    height:2em;
    border:1px solid black;
    position: relative;
}

.wrap:before {
    content:"1";
    position: absolute;
    left: 0;
    top: 0;
    border:1px solid black;
}

.wrap:after {
    content:"2";
    position: absolute;
    right: 0;
    top: 0;
    border:1px solid black;
}

私はあなたのフィドルでそれをテストしましたが、うまく見えます! http://jsfiddle.net/WtrfL/1/

于 2013-06-07T20:18:42.923 に答える