Нужна помощь по горизонтали, центрирующее абсолютное положение DIV

Question

Мне нужно центрировать некоторые элементы с абсолютным расположением относительно контейнера. После прочтения многочисленных статей, похоже, такая структура, как следующая, будет выполнять эту работу. Единственная проблема с IE7. Как-то ширина элемента item1 (элемент div) сжимается до 0 (даже если ширина явно указана на нем) на IE7. 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>