javascript - Chrome/FFとIE8での検索ボックスの配置

Question

ページに検索ボックスがあります。Chrome / Safari / FFなどでは、ボックスはメインdivの右側に正しく配置されます。問題のページはここにあります：

問題のボックスは、バナーのすぐ下にあるメイン検索の検索ボックスです。

私はさまざまなフロートテクニックを試し、divをクリアしましたが、何らかの理由で私が試したものはすべて違いがなく、IE8では「タイプ」ボックスの上部に表示されます。

どんな助けでも大歓迎です。

score 1 · Accepted Answer

float:right検索ボタンにインラインスタイルを追加します。

クラスfloat:leftからルールを取得しています.left

score 0 · Accepted Answer

@Rick Donohoeがすでに述べたように、リンクがないと見づらいです。

しかし、私が考えたのは、コンテナー（のような<div id="header"></div>）position: relativeを持ち、次にsearch-containerを持ってposition: absoluteいるということです...そのように：

#header {
    position: relative;
}

#search {
    position: absolute;
    right: 0; /* push search onto the right */
    top: 0;
}

他のブラウザがその特定のcssコードを読み取らないようにするために、IEの条件付きコメントを使用できます。

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->

または多分これはうまくいくでしょう：

#search {
   float: right;
}

score 0 · Accepted Answer

リンクなしではわかりにくいですが、IEが他のブラウザとは異なる方法でボックスモデルを処理する方法については、Googleを参照してください。箱の幅が違うのではないかと思いますが、これで容器から押し出されました。

再び、さらなるコードメイトなしでは助けることはできません。

お役に立てば幸い

score 0 · Accepted Answer

IE9でも正しくありません。

クラスを追加するには<div align="right">、次のように記述し、整列属性を削除します。

.someclass {
   float:right;
   overflow:hidden
}

4 に答える 4