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>

需要帮助水平居中绝对定位的DIV

1 个答案: