0

もともと IE7 を対象として設計された Web アプリケーションがあります。CSS を再調整して、最新バージョンの Chrome でアプリを表示できるようにしています。サイト全体でスライド ドアの入力ボックスの位置がずれている問題を修正しましたが、IE7 と Chrome の両方でスライド ドアを位置合わせできないページが 1 つあります。セットアップは非常に簡単です。

<span>
    <input type="text" ... />
</span>

この場合、スパンは引き戸の左側のキャップを保持し、入力は右側のキャップと本体を保持します。スパンと入力の両方を、同じ高さでマージンやパディングのないインライン ブロックとしてスタイル設定しました。Chromeはそれを釘付けにし、見た目は素晴らしいですが、IE7は次のように入力をスパンより1ピクセル低くレンダリングしています:

画像を投稿するには、より多くの評判が必要です

入力に ​​-1px の上余白を追加すると、IE7 は正しくレンダリングし、Chrome はずれてレンダリングします。このインスタンスを、IE7 と Chrome の両方で動作するアプリ内の他のすべての引き戸入力と比較してみましたが、ここで何が違うのか、一生わかりません....

このような問題に遭遇したことのある人はいますか?

4

1 に答える 1

0

これを修正するためのより良い方法はほぼ確実にありますが、それを見ずに..

「ie7fix」などclassの壊れたものに a を追加してから、次のようにします。input

/* applies to only ie7 */
*+html .ie7fix {
    margin-top: -1px; 
}

http://en.wikipedia.org/wiki/CSS_filter#Star_plus_hack

于 2011-07-20T20:51:24.910 に答える