1

最近、デスクトップPCをWin8リリースプレビューにアップグレードしました。コンシューマープレビューを使用する前は、正直に言って両方が本当に好きです。

とにかく、Consumer Previewでは、作成しているWebサイトに問題はありませんでした。IE10、IE9、Chrome、Firefox、Safariではすべてが正常に機能しました。各ブラウザのわずかな違いを除いて、すべて同じように見えました。全体として、問題ありません。

しかし、リリースプレビューにアップグレードした後、IE10の新しいバージョンを使用した後、コンシューマープレビューで作業していたのと同じサイトにあるものの一部が正常に動作しませんでした。私が話しているのは、私が持っているいくつかのテーブルでのホバー効果です。

テーブルのCSSは単なるテーブルであり、マウスを行の1つに移動すると、ホバー効果が表示されます。

ホバーのCSSは次のとおりです。

table.Green tr:not(:first-child):hover {
    background:#dddddd; /* Old browsers */
    background:-webkit-linear-gradient(top, #FFFFFF 0%, #dddddd 100%);
    background:-moz-linear-gradient(top, #FFFFFF 0%, #dddddd 100%);
    background:-o-linear-gradient(top, #FFFFFF 0%, #dddddd 100%);
    background:-ms-linear-gradient(top, #FFFFFF 0%, #dddddd 100%);
    background:linear-gradient(top, #FFFFFF 0%, #dddddd 100%); /* W3C */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF ', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
}

特別なことは何もありません。列のヘッダーを持つ最初の行はこれによる影響を受けないはずですが、他のすべての行は影響を受けるはずです。そして、私が言ったように、これは最近のIE10や他のすべてのブラウザーで完全に機能しました。しかし、新しいIE10にはありません。

私が何を意味するかがわかるように画像を添付しました（Chromeで動作し、IE10リリースプレビューでは動作しません）：

IE10リリースプレビュー

クロム

ご覧のとおり、最初の画像は緩やかなグラデーションの影響を受けるセルのみであり（どちらにもリンクが含まれています。顧客名と[取引]の下の小さなアイコン）、2番目の画像では行全体が影響を受けます。グラデーション。

どうしてか分かりません。ただし、実際のリンクが何らかの形で存在するセルのみがホバー効果を示し、マウスオーバー効果への応答に問題が生じることもあります。したがって、一部の行はホバー効果を取得しますが、同じテーブル内の他の行は、すべての行にまったく同じコンテンツがある場合でも、取得しません。どの行をアクティブにしたいのかは非常にランダムなようです：/

それで、これは私が無視すべきものであり、Microsoftによって修正されることを願っていますか、それともIE10リリースプレビューにのみ突然表示される私のHTML / CSSの本質的な欠陥ですか？

誰かがこれで私を助けてくれることを願っています:)

前もって感謝します

よろしく

4

1 に答える 1

0

接頭辞なしlinear-gradientの構文は、接頭辞付きモードで使用されていたものと同じではありません。

見る：

2番目のリンクからの引用：

あなたのコードにとって何を意味するか CSS グラデーション

広く相互運用できますが、最新のすべてのブラウザーでサポートされている接頭辞付きのグラデーション構文は、現在は廃止されている仕様のドラフト バージョンを反映しています。この以前の構文は、現在の勧告候補と互換性がありません。たとえば、次のグラデーションを宣言したとします。

背景: -ms-linear-gradient(左、黄色、赤);

次に、接頭辞なしの同等のものを生成することは、単に ‑ms‑ 接頭辞を削除するだけの問題ではありません。IE10 の接頭辞なしの線形グラデーション関数は最新の仕様に準拠しているため、次のようになります。

背景:線形グラデーション (右へ、黄色、赤);

今後のブログ投稿では、CSS グラデーションに対する IE10 のサポートについて詳しく説明する予定です。

あなたの場合、background:linear-gradient(topの代わりに ... をtop使用して変更する必要がありますto bottom。

于 2012-07-10T08:52:31.913 に答える