IE6、IE7、IE8とFirefox

Question

に、中心に、同じ行に他のに対して1を3つのdivを置くしようと、私はこれやって問題があります。

--space-- div1_left div2_center div3_right --spaceを -

Div 1と3には画像が含まれ、Div 2にはul/liベースのCSSドロップダウンメニューが含まれています。 Div 1およびDiv 3はdiv 2に貼り付けられます。 合計行は水平方向の中央に配置されます。

私は問題なくFirefoxとIE8でこれを達成することができます。 しかし、IE7とIE6ではこれは動作しません。 すべてのIE> = 6およびFirefoxブラウザで互換性が必要です。

ありがとうございます！

Answer 1

私は1つのコンテナdivを左と右のパディングと余白を左右につけて作成します：auto。

、それ3 divの内部

「は、このスタイルを持つS：

width:100px;/* or how much you want (the sum of all must be <= container width) */ 
float:left; 

Answer 2

はこれを試してみてください：

1. があなたの現在の変更 'スパン '要素のdiv' に要素を'。デフォルトではインラインでレンダリングされます。
2. このコンテンツを 'nav'のIDを持つ 'div'にラップします。
3. 「nav」要素のCSSスタイルを「margin：0 auto;」を含むように設定します。幅：960ピクセル; 'スタイル。これはページ上のすべてのものを中心にします。
4. CSSリセットを使用して、ブラウザ間でレンダリングを正規化するのに役立ちます。

これが役に立ちます。

ボブ

UPDATE：ここでは例へのリンクです：

http://jsbin.com/onasi/3/edit

Answer 3

rcravensによって与えられた答えに基づいて正確には、ここのコードです：

<div style="vertical-align: middle; text-align: center; height: 50px; position: relative; 
background-image: none; top: 0px; left: 0px; right: 0px" class='ui-state-default'> 
     <span style="text-align: left; vertical-align: middle; display: inline-block; width: 33%;height: 100%;"> 
       <img id="imgLeft" style="float: left; text-align: center; vertical-align: middle;"class='logo' src='' alt='' /> 
     </span> 
     <span style="text-align: center; vertical-align: middle; display: inline-block; width: 33%;"> 
       <input type="text" id="txtSearch" style="width: 50%" /> 
       <img id="btnGlobalSearch" class="findImage" style="cursor: pointer; vertical-align: middle" src="<%= System.Web.HttpContext.Current.Request.ApplicationPath.TrimEnd('/') + "/"%>Images/icons/find.png" /> 
     </span> 
     <span style="text-align: center; vertical-align: middle; display: inline-block; width: 33%;height: 100%;"> 
       <img id="imgRight" style="float: right; text-align: center; vertical-align: middle;" src='' class='logo' alt='' /> 
     </span> 
</div> 

これはIE7の欲求を満たす.....