絶対配置されたDIVを水平にセンタリングするのに助けが必要

Question

コンテナに対して絶対配置された要素を中心に配置する必要があります。数多くの記事を読んだら、次のような構造が仕事をするようだ。唯一の問題はIE7だ。 IE7では、何とかitem1（div要素）の幅が0に縮小されます（幅は明示的に指定されていますが）。 item2はすべてのブラウザで正常に動作します。私の質問は、このような状況でブロック要素の幅スタイルがIE7によって尊重されない理由です。あなたは回避策や修正を知っていますか？

<div style="position: relative; width: 500px; height: 400px; border: thin dotted green;"> 
    <div style="position: absolute; top: 0px; left: 50%; height: 0px;"> 
     <div id="item1" style="position: relative; display: inline-block; left: -50%; border: thin dotted green; width: 300px; height: 30px;"></div> 
    </div> 
    <div style="position: absolute; top: 50px; left: 50%; height: 0px;"> 
     <input id="item2" type="button" value="Button" style="position: relative; display: inline-block; left: -50%;"> 
    </div> 
</div> 

私は上記のコードでjsfiddleを作成しました。あなたのご意見ありがとうございます。

Answer 1

min-width = 300pxを追加します。コード行は次のようになります

<div style="position: relative; display: inline-block; left: -50%; border: thin dotted green; width: 300px;min-width:300px; height: 30px;"></div>