4

私は現在、問題に頭を悩ませようとしていますが、理解できないようです。

ナビゲーションの順序付けられていないリストで、疑似クラスの前に css を介してすべてのリスト項目の前にアイコンを追加したいと考えています。

<ul class="list">
    <li class="list-item"><a href="#">one</a></li>
    <li class="list-item"><a href="#">two</a></li>
    <li class="list-item"><a href="#">three</a></li>
    <li class="list-item"><a href="#">four</a></li>
</ul>​

私が最初に考えたのは、両方の要素 (アイコンと a タグ) に display:inline-block を与え、アイコンを vertical-align:middle に揃えることでした。少し調整するだけで (margin-bottom)、これはクロムでうまく機能します:

.list-item {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #F3F3F3;
    height:1.5em;
    overflow:hidden;
}

.list-item:before {
    display: inline-block;
    content: '';
    vertical-align: middle;
    background-color: red;
    width: 5px;
    height: 7px;
    margin: 0 4px 0.125em 5px;
}

.list-item a {
    display: inline-block;
    overflow: hidden;
    line-height: 1.5;
    height:1.5em;
}

しかし、Firefox でページを読み込むと、アイコンが一番下に表示されなくなります。http://jsfiddle.net/pUhPB/4/

display、vertical-align、margin-values の考えられるすべての組み合わせを両方のブラウザで正しく表示できるように試してみました。最後に、a-tag vertical-align:middle とアイコン vertical-align:baseline 、うまくいくようです：

.list-item {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #F3F3F3;
    height:1.5em;
    overflow:hidden;
}

.list-item:before {
    display: inline-block;
    content: '';
    vertical-align: baseline;
    background-color: red;
    width: 5px;
    height: 7px;
    margin: 0 4px 0 5px;
}

.list-item a {
    display: inline-block;
    vertical-align:middle;
    overflow: hidden;
    line-height: 1.5;
    height:1.5em;
}

http://jsfiddle.net/L3N3f/

しかし、私はそれを理解していません。最初のバージョンが機能しないのはなぜですか? 私には、実際に動作するバージョンよりもはるかに論理的に思えます。そして、両方のブラウザーのどちらが要素を正しくレンダリングしないでしょうか?

私はすでに私にとってうまくいくと思われる解決策を見つけたので、緊急の質問ではありませんが、問題の核心（および解決策）を理解していないことに悩まされているので、誰かができれば本当に感謝していますこれについて教えてください。

ありがとう

4

3 に答える 3

7

Web 標準によると、インライン要素のみが「垂直方向に整列」できますが、Chrome などの一部のブラウザーでは依然としてインライン要素が整列されます。整列されるのは要素であり、その内容ではないことに注意してください! したがって、これを a に適用する<span>と<span>、周囲のテキストと整列し、その内部にあるものは何も整列しません。

ispo lorem <span> text </span> due carpe diem

を追加span {vertical-align:top; border: 1px solid black}すると、<span> text </span>(ボックス全体) がテキストの残りの部分よりも高くなりtext、ボックスの天井に押し付けられなくなります<span>。

ここでの中心的な問題は、Firefox は Web 標準に関しては非常に文字通りであるのに対し、Chrome はこのようないくつかの暗黙の機能を追加することです。

詳細については、ここをクリックしてください。

編集:どうやら、でvertical-align:topのみ使用すると、<a>それも機能します。

于 2012-11-20T16:33:13.563 に答える
6

あなたの問題は、スペック設定ごとoverflow:hiddenにインラインブロックのベースライン位置が変わることです。Firefox は、仕様の内容を実装しています。クロムはそうではありません。

.list-item aしたがって、ベースラインが揃っている限り、2 つのブラウザーで異なる方法でレンダリングされます。レンダリングを同じにする唯一の方法は、目に見えないオーバーフローでインライン ブロックをベースラインに揃えないようにすることですvertical-align: middle。

于 2012-11-22T08:04:26.867 に答える
0

これを試してください：http：//jsfiddle.net/pUhPB/6/

このような状況で私が最初に行うことは、両方のブラウザーでコードを開くことです。次に、問題がわかるまでCSSコードの削除を開始します。余白と垂直方向の配置を削除すると、両方のブラウザでコードのレンダリングが異なります。そのため、両方が同じになるまでコードを削除し続けます。両方のブラウザで同じになった後、目的の効果を得るためにできることを変更しました。

新しいCSSは次のとおりです。

.list-item:before 
{
    content: '';
    background-color: red;
    width: 5px;
    height: 7px;
    margin: 5px 4px 0 5px;
    float:left;
}
于 2012-11-20T16:44:09.760 に答える