即 div 定位绝对宽度错误答案

【问题标题】：ie div positioned absolute width bug即 div 定位绝对宽度错误
【发布时间】：2014-05-31 04:12:42
【问题描述】：

我有一个绝对位置的 DIV，它包含一个 INPUT 字段，我需要这个输入在我通过 display:block 和文本对齐完成的 div 内垂直和水平居中，问题是宽度属性不是在 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;   
}

【问题讨论】：

@Andrei IE10 但我与以前的版本也有同样的问题
在 IE10 中对我来说很好
在 IE10 中也适用于我
@Andrei 我现在想知道这是否是由外部 div 引起的，这是一个在线测试，它对我不起作用（注意导航栏右侧蓝色框的不同宽度）@987654322 @
可以是浏览器的默认css。为什么不为输入设置宽度？

标签： css html input width

【解决方案1】：

问题是由em 单位引起的。

如果您比较 IE 和 Chrome，您会发现菜单中的绿色条在 IE 中比 Chrome 更靠左。那是因为字体大小在这里和那里存在像素差异。

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

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

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

【讨论】：

你建议安德烈做什么？我的正文主要字体以 px 为单位，其余字体相对于该字体（16px）。这是否意味着如果我们需要交叉浏览，我们只需要停止使用 ems 吗？顺便说一下，输入宽度没有帮助。
我不建议这样做。 em 单位应该没问题。也许以 em 单位计算的填充也是真正的问题。
我已经为 pxs 更改了导航栏中的所有 em，即使现在差异不太明显，现在在 ie 和 firefox 中的外观仍然存在差异。这真的很烦人。
查看我的编辑。我建议你专注于让它们看起来不错，而不是让它们看起来一样。