問題タブ [box-shadow]

960px のテンプレートを作成していますが、ブラウザ ウィンドウをスクイーズすると問題が発生します。ウィンドウを要素の最小幅よりも小さくすると、右側のボックスの影が消えます。なぜそれが起こっているのですか？

HTML:

CSS:

次の css プロパティが定義されています。

ボックスの影: #CCCCCC x2 y2 blur2;

しかし、ブラウザで実行すると、無効なプロパティ/値と表示されます。ここで何が問題なのですか？

box-shadow を IE で動作させる方法について質問しましたここ。

ただし、実際には IE が問題ではないことが判明しました。IE は、次のように影を生成できます。

上記の悲鳴は、localhost で実行されている Meteor アプリからのものです。ただし、Sharepoint サイト (ページのコンテンツ エディター Web パーツ) で影の効果を実現しようとすると、ボックスの影が表示されません。

作業用 (Meteor) の CSS は次のとおりです。

したがって、IE 固有のディレクティブがなくても、IE でシャドーイングが正常に機能します。

機能しない (Sharepoint コンテンツ エディター Web パーツ) の CSS は次のとおりです。

注: かなり前に IE のバージョンをチェックした msdn 雑誌のスタックに誓って言うと、それは IE8 でしたが、確認に行ったところ、実際には IE11 でした! しかし、この比較的新しいバージョンの IE11 でも、ボックス シャドーイングは失敗しています。

私が得た以前の提案は、これを試すことでした：

...しかし、それは何もしません。

私も試しました：

そして最後に、私の以前の質問 (上記にリンクされています) での回答は次のことを示唆しています。

progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2), progid:DXImageTransform.Microsoft. Shadow(color=#aaaaaa,direction=90,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa ,direction=180,strength=10), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength =5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2);

しかし、これはどれも機能しません。ローカルで実行されている Meteor アプリでは IE でシャドウが機能するのに、Sharepoint Server でプロビジョニングされたコンテンツ エディター Web パーツでは機能しないのはなぜですか? どちらも「InPrivate」IE セッションの同じインスタンスで実行されています。

James Johnson の回答で見つけた 1 つの可能性は、おそらく私のマークアップの次の行を示しています。

…が問題です。しかし、私はその行を明示的に追加しませんし、それがどこから来たのかもわかりませんし、コードベースのどこから来ているのかもわかっていて、それを削除すると、Sharepoint サイトの他の場所でどのような大混乱を引き起こすかわかりません。

記録として、動作中の Meteor アプリの「ソースの表示」は大きく異なり、「メタ」タグは含まれていません。それはまったく「別の動物」です。好奇心旺盛な方のために、ここにその全体を示します。

アップデート

これは SharePoint の HTML の問題と思われるため、「ホバー」イベント ハンドラー トグル (mouseenter、mouseleave) などで jQuery を使用して回避する必要があるのではないでしょうか。私はもともとその道をたどっていましたが、より洗練された CSS のみのアプローチに切り替えました。IE (Web 開発者の労働時間の悩みの種) のようなものは、エレガンスを達成することをより困難にします。

パネル見出しを持つ 3 つのブートストラップ パネルを使用しcol-md-4ています。各パネルの下部にはボックス シャドウがあり、パネルの最大高は 300px です。パネル内のテキストは、パネル自体よりも長くなっています。overflow: scrollこれに使用したいのですが、使用するoverflow: scrollとボックスシャドウが「上書き」されます(その理由は理解しています)。この一見単純な解決策をしばらく探しましたが、何も思いつきませんでした。

ボックス シャドウ スタイルと他の 2 つのパネルを除外して、その下をきれいに保ちます。

私は長年の Web デザインで、CSS のボックス シャドウがリソースに対して非常に高価であり、多くの古い携帯電話の動作が著しく遅くなることに気付きました。しかし、それはテキストシャドウの場合ですか? text-shadow を使用できるのはいつですか? また、それはどのようにレンダリングされますか?

を含む単純なテーブルがありますが、box-shadow最初のセルを影から除外したいと考えています。

そのセルに追加しようとしましbox-shadow: noneたが、テーブル全体の影を上書きしません。これが可能かどうかさえわかりませんか？

HTML:

CSS:

これは、テーブルの例を示すためのフィドルです

これは可能ですか？

アップデート

最初のセルとは、クラスの行の最初のセルを意味しますheader-table .header td {}

これは完璧な結果のイメージです: