2

私は現在、メインの「ウェルカム テキスト」に複数の行が含まれるデザインのサイトに取り組んでいます (これは製品に関する短い紹介であるため)。これは、透明な (0.7) 白の背景 (rgba(255,255,255,0.7)複数行のパディング付き。はい、複数行のパディングです。つまり、テキストのすべての行には、上下左右のパディング、背景色、および小さな行間の透明なスペース。

これを実現するために、水平方向のオフセットを持つボックス シャドウを使用して、各行の左右のパディングをシミュレートしました。これは、Internet Explorer を除くすべてのブラウザーで機能します。サイトをすべてのブラウザーで動作させたいので、しばらくの間この問題を修正しようとしましたが、これはインターネット エクスプローラーの問題であるという結論にほぼ達しました。

Geoff Muskett の例を使用しました ( http://geoffmuskett.com/text-with-background-padding-on-the-end-of-each-line-and-a-gap-between-lines/ ) 。 IEを除いて例外として。

問題は、IE でページを開くと、ぼかしを 0 ピクセルに設定しても、ボックスの影がややぼやけてレンダリングされるように見えることです。（または追加しなかっただけで、両方とも機能しませんでした）。

Geoff の例のコードでさえ機能しません。

HTML

<h2><span>Could you benefit from having Alfi in your home?</span></h2>

CSS

h2 { 
   line-height: 1.8em; 
   font-size: 1.7em;   
   display: inline; 
}  
h2 span { 
   padding: 0.2em; 
   box-shadow: 0.2em 0 0 rgba(255,255,255,0.7), -0.2em 0 0 rgba(255,255,255,0.7);    
   background-color: #fff; 
   background-color: rgba(255,255,255,0.7); 
}

この問題を知っていて、あまりハックではない (好ましくない) 解決策があるかどうかを知っている人はいますか?

IE 11.0.9600.17905

編集

2015 年 8 月 3 日 09:32

私は今週末、この問題を調査しており、現在私が抱えている問題とまったく同じ問題を抱えている人々の投稿をいくつか見つけました。これは IE のレンダリング バグのようです。参照: https://connect.microsoft.com/IE/feedback/details/810756/ie-11-gap-between-element-background-and-its-box-shadow

また、別の StackOverflow の投稿で、@nickmorss という名前の誰かが、box-shadowIE11 と FF34+ では複数行の埋め込みテキストを実現するために を使用すると述べています。FFを使用して修正できますbox-decoration-break: clone;が、これは私の側では機能しません。

これはほとんどバグではないので、CSS で自分で修正することはできないと思います。

4

2 に答える 2

1

これはIE11で機能することがわかりました

body{
    background-color: blue;
    
}
h2 { 
   
   line-height: 1.8em; 
   font-size: 1.7em;   
   display: inline; 
}  
h2 span { 
   padding: 0.2em; 
   box-shadow: 0.2em 0 0 rgba(255, 255, 255,0.7), -0.2em 0 0 rgba(255,255,255,0.7);    
   background-color: #fff; 
   background-color: rgba(255,255,255,0.7); 
}
<h2><span>Could you benefit from having Alfi in your home? Making this text a little longer so that it wraps on stackoverflow</span></h2>

したがって、あなたのサイトはおそらく互換モードであるか、IE11 以外の別のレンダリング モードを使用していると思います。

F12 を押してエミュレーション タブに移動し、IE11 モードで実行していることを確認します。適切なドキュメント モードになっていますか。そうでない場合は、サイトを修正して、正しいドキュメント モードを使用していることを確認する必要があります。

そのブログ投稿のコメントでは、Firefox では機能しないと述べていますが、誰かが投稿コードを持っていることに注意してください。 ここに画像の説明を入力

于 2015-07-31T13:33:08.047 に答える