1

IE10 でプログラムを見ると、非常に異常なレンダリングが発生しています。これは、他のブラウザー (Chrome、Firefox、iOS Safari) では発生せず、IE9 でも発生せず、ドキュメント モードを IE9 標準に設定すると IE10 でも発生しません。

さらに悪いことに、私が実験しているフィドルでは起こりません。

悪いバージョンの外観は次のとおりです。

ここに画像の説明を入力

ドキュメント モード IE9 標準を使用した適切なバージョンの外観は次のとおりです。

ここに画像の説明を入力

はい、再現可能なコードを提供せずに質問していることはわかっていますが、必死にこれを修正しようとしている間 (今日の後半にリリースが予定されています)、誰かがどこを見るべきかアイデアを教えてくれることを願っています.

IEの開発者ツールビューからコピーされた、すぐに問題のあるコード行は次のとおりです。

<input class="generalTrackWidth" style="width: 167px;" type="text"/>

このクラスは実際には jquery セレクターとして使用され、関連する css はありません。

要素のスタイル設定を見ると、灰色のボックスと白い外枠を説明するものは何も表示されません。パディングは 1px、ボーダーは 2px、マージンは 0px です。入力はテーブルの一部ですが、それ以外の場合は、灰色の境界線と余分な白いパディングをレンダリングする div が含まれていません。

CSS を使用して ms-clear を微調整してみました ( Internet Explorer 10 Windows 8 テキスト入力とパスワード アクション アイコンの削除を参照)。そうではありませんでしたが、要素にフォーカスがあるときに表示される X も異なって見えます。

その他の交絡変数: この要素は、jQueryUI ダイアログ内に含まれるテーブルの一部です。テスト fiddleを作成しましたが、そこでエラーは発生しません。

もう 1 つの重要な点は、これが GWT プロジェクトであるということです。問題のあるコードは純粋な JS/Html ですが、おそらくブラウザごとの GWT の特別な処理の一部が原因です。

何を探すべきか考えていますか？

4

1 に答える 1

2

これは非常に初歩的なミスでした。

1 か月前、<input type="file">IE 10 のデフォルトを調べたところ、見栄えが悪いことに気づき、css ファイルに次のコードを追加して修正しました。

::-ms-value {
    margin: 5px;
    border-style: groove;
}

::-ms-browse {
    margin: 5px;
}

ファイル入力要素のみに明示的だと思いました。ErikLaw がコメントで述べたように、 -ms-value はすべての入力で機能します。

修正は簡単で、ファイル入力のセレクターをより具体的にする必要がありました。私の場合、ファイル入力にはそれに対する一意のクラスがあったため、セレクター .uniqueClass::-ms-valueを.uniqueClass::-ms-browse

-ms-valueIE の開発者ツールが(または-ms-browse) 疑似クラスを表示しなかったため、これをデバッグするのは非常に困難でした。したがって、css ファイルを調べることは考えていませんでした。

于 2013-09-11T22:29:52.520 に答える