0

text-shadow不足しているプロパティを補うために、jQuery と IE フィルターを使用して IE<=9 でドロップ シャドウを作成しました。これは、このサイトのページの上部のh2見出しで確認できます。これは、text-shadow プロパティ (によって検出される) をサポートしていないブラウザーで jQuery を使用して、要素内のテキストを複製します...modernizrh2

jQuery(".no-textshadow h1, .no-textshadow h2").each(function(){
  var text_shadow_markup = jQuery(this).html();
  jQuery(this).append("<span class='shadow'>"+text_shadow_markup+"</span>");
});

...この CSS でスタイル設定されている場所 (このIE ドロップ シャドウ手法の礼儀):

@media only screen and (min-width: 768px) {
  h2 {
    text-shadow: #000000 0px 5px 5px;
    position: relative;
    zoom: 1;
    z-index: 1;
  }
  h2 span.shadow {
    color: #000000;
    position: absolute;
    left: -7px;
    top: -2px;
    z-index: -1;
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=2) progid:DXImageTransform.Microsoft.blur(pixelradius=5,enabled='true');
    -ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=2) progid:DXImageTransform.Microsoft.blur(pixelradius=5,enabled='true')";
  }
}

問題:影は、その背後にあるテキストとは無関係に流れます。IE8 と IE9 では、影の 1 つがテキストから消えるまでウィンドウの幅をゆっくりと変更することで、常にこれを確認できます。

影が要素spanの収容ボックスに絶対に配置されている場合、これがどのように発生するかわかりません。h2それでも、彼らはあたかも執着していないかのように流れることができます。これはブラウザのバグである可能性があることを認識しているため、IE8 と IE9 をサポートする回避策があれば幸いです。誰かが上記の私のアプリケーションの問題を指摘してくれれば幸いです。

ps、CSS Sandpaper text-shadowが同様の手法を実装しており、それが上記の問題に対処するためのベスト プラクティスとして受け入れられている場合は、誰かの支持を受け入れると聞いています。

4

1 に答える 1

0

この質問は、SitePoint のこのスレッドで言い換えられ、議論されています。この問題は、次の 2 つの変更により、上記のライブ サイトで解決されました。

1) 行の長さを同じに保つには、次のように、左の配置オフセットと一致する重ね合わせ (シャドウ) 要素に右のパディングを追加する必要があります。

h2 span.shadow { ...
  left: -7px;
  padding-right: 7px; ...

2) 上にある jQuery セレクターを次のように変更することにより、スーパーインポーズ (シャドウ)<span>を の内部に移動し<a>、新しいスタック コンテキストを指定する必要があります。

jQuery(".no-textshadow h1 a, .no-textshadow h2 a").each(function(){

この CSS を追加します。

h2 a {
  display: block;
  zoom: 1.0;
  position: relative;
}

なぜ(2)が必要(または十分)なのか、私にはまだよくわかりません。jQuery Textshadowの設計ページにいくつかの手がかりがあります(このプラグインは、元の質問の一部に答えるために、ベスト プラクティス ソリューションであることが合意されました)。GlowとBlurの 2 つのセクションでは、要素の配置に必要な調整と、<span>それぞれが新しいスタック コンテキストを作成するネストされた要素について説明します。

私は他の解決策と説明にオープンであり、これが同じ問題を抱えている人に役立つことを願っています.

于 2013-04-06T22:11:09.250 に答える