Question

我有一个位置绝对的DIV包含一个INPUT字段，我需要这个输入在div中垂直和水平居中，我用display：block和text align完成，问题是width属性不是对于IE（10及以下版本）以相同的方式工作，父div在chrome和firefox中具有适当的宽度，但在IE10,9和8中具有完全不同的宽度。

如果此信息相关，则父div位于另一个具有位置相对的div中。我知道这听起来像回到未来的问题，但我真的很惊讶地注意到我在标准化之后仍然存在这个问题等。

这是代码 HTML and CSS

<div>
    <input type="text" />
</div>

div {
    position:absolute;
    background: blue;
    width: 180px;
    padding:8px 0;
    display:block;
}

input {
    border-radius: 5px;
margin: 0;
height: 20px;
position: relative;
display: block;
margin: 0 auto;   
}

Answer 1

问题是由em单位引起的。

如果您比较IE和Chrome，您会看到菜单中的绿色栏位于IE中，而不是Chrome。这是因为这里和那里的字体大小存在像素差异。

它们的计算方式不同。我认为IE近似不同。

也许不是试图让两个浏览器看起来一样，你可以让它在两个浏览器上看起来都很好。用户不会知道。

使用在IE浏览器中添加的CSS文件，或者使用javascript检测浏览器并在body上添加类（类似于modernizr），或使用CSS hacks。

即div定位绝对宽度bug

1 个答案: