1

いくつかのコンテンツを含む HTML テーブルを作成しました。一部のセルには、その内容の下にアスタリスク ( ) が必要なので、これらのセルにクラス*を追加しました。asterisk

<table class="numbers">
    <tr>
        <td class="asterisk">1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td class="asterisk">6</td>
        <td class="asterisk">7</td>
        <td>8</td>
    </tr>
</table>

次に、:after疑似要素とcontentプロパティを使用する次の CSS ルールを追加しました。アスタリスクを追加し、セルの内容の下に配置します。

.asterisk:after {
    display:block;
    content: '*';
}

また、セルにスペースを追加し、境界線を付け、さらに重要なことに、テキストを中央に配置しました。

.numbers td {
    width: 40px;
    border: 1px solid black;
    text-align: center;
}

さらにいくつかの CSS ルール (このフィドルで確認できます) を使用すると、次の結果が得られました。

セルが整列して表示された後に追加されたコンテンツ

つまり、Firefox と Chrome でこの結果が得られましたが、Internet Explorer 8 でも必要です! そこで、しかし、私はこれを得ました：

セルを左揃えにした後に追加されたコンテンツ

IE8 で最初の結果を取得するにはどうすればよいですか?

4

1 に答える 1

3

text-align他のブラウザーとは異なり、Internet Explorer 8 以下の疑似要素から CSS が追加されたコンテンツは、親要素からプロパティを継承しないようです。解決策は幸いなことに単純です。次のフィドルtext-alignのように、疑似要素ルールにプロパティを追加するだけです。

.asterisk:after {
    text-align: center;
    display: block;
    content: '*';
}

または、さらに良いことに、子疑似要素が親text-alignプロパティを継承するようにすることもできます。

.asterisk:after {
    text-align: inherit;
    display: block;
    content: '*';
}
于 2013-11-06T22:13:17.230 に答える