Chrome CSS问题与相对父母内部的绝对定位输入元素(Chrome 32.0.1700.77)右:0无法正常工作

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%; */
}

小提琴: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

确定“宽度”的使用值与内联替换元素相同。

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

如果“宽度”的计算值是“自动”，并且元素具有固有宽度，则该固有宽度就是“宽度”的使用值。

此时，元件尺寸过度约束（它有width，left和right），以便应用下列规则：

忽略“ left”（如果包含块的“ direction”属性为“ rtl”）或“ right”（如果“ direction”为“ ltr”）的值，并求解该值。

这就是您看到的，正确的被忽略。与<input>往常一样，您应该设置默认宽度（在这种情况下为100％）并删除right规则。

对于更通用的解决方案，您可以将替换后的元素包装在<div>将与left和绝对定位的任何未替换元素（如）中right，然后可以为其他元素设置所需的宽度（请注意，如果box-model是content-width该width值将被添加到任何填充和边框）。

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