0

次の図に示すように、現在、テキストボックスの横に検索「ボタン」を配置しています。これにより、ChromeとFirefoxで問題なくレンダリングされます。

ここに画像の説明を入力してください

IE9では、このようにレンダリングされます。

IEレンダー

誰かが同様の問題に遭遇しましたか？どうすればこれを回避できますか？

検索ボタンのCSSは次のとおりです。

    .txtSearchBtn
{
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    left: -20px;
    top: 5px;
    cursor: hand;
    cursor: pointer;
    background-image: url(../Images/magnifier.png);
}

編集：エラーは、私のページがファンシーボックス内にレンダリングされていることに関係しているようです。IE9は、ファンシーボックスの外部でインラインブロックを同じように処理していません。

編集2：問題を理解しました。画像を左に-20px移動しているのに、最大幅の設定ではテキストボックスと画像用の十分なスペースがないため、IEは上​​の行に画像をレンダリングします。

4

2 に答える 2

0

インラインブロックのIEサポートは、IE8+で大幅に改善されました。これは、互換性モードでレンダリングしているように聞こえます。これは、基本的に、IE7（またはさらに悪いことに-Quirksモード）のようにこのページをレンダリングすることを意味します。

DOCTYPEを宣言していますか？これをhtmlファイルの先頭に追加してみてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

これにより、インラインブロックを正しく実行できるIE9レンダリングを使用するように強制されます。

于 2012-05-23T16:03:48.300 に答える
0

これは、IE が属性を認識できないために発生する問題です。

display: inline-block;

IE エクスプローラーはそれをインラインで表示します。目的の効果を得るには、コンテンツに「レイアウト」を使用する必要があります。

zoom: 1;
display: inline;

または類似。

この記事は私にとって役に立ちました。私が言おうとしていることを完全に理解するためにチェックしてください!

http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html

編集:IE9までの範囲でのみ背中をカバーしようとしている場合、@Porcoは正しいDOCTYPE宣言でカバーしています。

于 2012-05-23T16:02:07.030 に答える