css - 相对父项 (Chrome 32.0.1700.77) 内绝对定位输入元素的 Chrome CSS 问题 : 0 not working

Question

我在自动更新 Chrome 32.0.1700.77 后才注意到这个问题。我可以在绝对定位的输入元素中设置 top、left 和 bottom，但是 right: 0 是忽略。这是我的代码:

<div id="content">
    <input type="search"/>
</div>

#content {
    position: relative;
    top: 24px;
    height: 24px;
    background-color: gray;
}

#content input[type="search"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* width 100%; */
}

fiddle :http://jsfiddle.net/hAuSL/4/

它在更新前按预期工作。我也在 Firefox (26.0) 中看到了这个问题，但在 Opera (18.0.1284.68) 或 Safari (7.0.1 (9537.73.11)) 中没有。

我可以通过在输入元素样式中添加 width: 100% 来解决这个问题；但我想知道，是 CSS 有问题还是浏览器问题？

提前感谢您的任何见解。

Answer 1

这不是错误，看看如何计算绝对定位替换元素的宽度:

http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width

The used value of 'width' is determined as for inline replaced elements.

http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width

if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'.

此时元素尺寸被过度约束(它有 width 、 left 和 right )所以应用以下规则:

ignore the value for either 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

是你看到的，右边的忽略了。作为<input>始终有一个默认宽度，您应该设置您的默认宽度(在本例中为 100%)并删除 right规则。

---

对于更通用的解决方案，您可以将替换元素包装在任何非替换元素(如 <div> )中，这些元素将使用 left 进行绝对定位。和 right , 然后您可以为其他元素设置所需的宽度(注意，如果框模型是 content-width，则 width 值将添加到任何填充和边框)。

参见 http://jsfiddle.net/2UaYm/例如。