1

わかりました、これは興味深いものです。

ボックスに表示される<h1>ヘッダーがあります (のように画面に表示されるボックスを意味しますborder:solid 3px white)。ボックス自体と内部のテキストには影が必要です。ボックス内のテキストはページごとに変わるため、ボックスの幅を固定することはできません。

問題は次のとおりです。テキストではなくボックスにのみ影が表示されるIE9を除いて、完全に機能しています。

CSS から削除するdisplay:inlineと、IE9 で正しく機能しますが、ボックスは、テキストだけを囲むのではなく、コンテナー全体の幅になります。display:inline;したがって、解決策の鍵は、テキストとボックスをコンテナ内の中央に配置するためのより良い方法を見つけることであり、ドロップできると思います。

マークアップは非常に単純です。

<style>
.container {
    width:500px;height:200px;padding:50px;background:#eee;
    text-align:center;
}

h1 {
    font-size:34px;
    color:white;
    padding:25px;
    border:solid 3px white;
    letter-spacing:7px;
    display:inline;

    box-shadow: 0 0 6px #666;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
    filter:glow(color=black, strength=1); /* IE9 stupid proprietary shadow */
}
</style>

<div class='container'>
    <h1>Testing</h1>
</div>

ここで遊ぶことができます: http://jsfiddle.net/j434X/4/

ありがとうございました。

4

1 に答える 1

0

marginh1にプロパティを追加しました。これにより、削除しdisplay: inline;ても同じ結果が得られますが、長いテキストは別の行にスキップされます。あなたが望んでいないことを私が知っている幅を設定した場合のようなものです。とにかく、これがフィドルです。

于 2013-08-03T02:46:53.707 に答える