1

いくつかの検索を行いましたが、探していた答えが見つかりませんでした。重複している場合は、どこに向かっているべきか教えてください。

とにかく、スパンの継承 (ある場合) の動作を理解するのに苦労しており、スパンでさまざまなスタイルの組み合わせを作成し始めると、Firefox と Chrome は異なるようです。

具体的には、（詳細については以下を参照してください）通常のインライン、絶対配置、テキスト中心のスパン コンテナがあります。このコンテナには、さらに 2 つのスパン、インライン ブロック、絶対配置（class="arrow"）が 1 つ、ブロックされたスパンが 1 つ（class="arrow"）が含まれます。クラス="テキスト")。Chrome では、矢印クラスのスパンはコンテナー内で左揃えになります。ただし、FF11 では、矢印クラスのスパンはコンテナー内で中央揃えになります。

だから、私の質問は次のとおりです。

  1. Chrome と FF11 で矢印クラスのスパンの動作が異なるのはなぜですか (FF7 には何らかの理由で Chrome の動作があります)。
  2. 「正しい」スパン継承プロパティを表示しているブラウザはどれですか?
  3. テキストクラスのスパンをインラインブロックにすることで、両方のブラウザーを同じように動作させることができますが、それが役立つ理由がわかりません...
  4. text-class スパンはブロックされたスパンなので、container-class スパン (およびその境界線) を 100% 幅にするべきではありませんか? 現在、コンテナ クラスはテキスト クラス スパンの周りで折りたたまれています。（これはおそらく別のスレッドに移動しますが、これについて迅速な回答を得ることができればうれしいです）.

DisplayProps.html:

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="displayProps.css">
    </head>
    <span class="container">
        <span class="arrow"></span>
        <span class="text">Why is the arrow different?</span>
    </span>
</html>

displayProps.css:

span.container {
    display: inline;
    position: absolute;
    border: 2px solid; 
    text-align:center;
}

span.container span.arrow { 
    border-color: transparent black transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    display: inline-block;
    position: absolute;
}

span.container span.text {
    display: block;
}

助けてください、ありがとう！

4

1 に答える 1

0

矢印には絶対位置がありますが、上/下と左/右の値が定義されていません。そのため、ブラウザは異なるデフォルト値を使用します。

たとえば、次のコードを追加すると、同じ位置になるはずです。

span.container span.arrow {
    ...
    top: 10px;
    left: 10px;
}

この例も参照してください。

===更新===

コンテナを相対位置に変更し、ブロックを表示すると、幅は 100% になります。

span.container {
    display: block;
    position: relative;
    ...
}

更新された例を参照してください。

Ps: 距離を定義する場合にのみ絶対位置を使用してください。

于 2012-03-21T07:14:13.317 に答える