Chrome CSS问题，绝对定位的输入元素位于相对父元素（Chrome 32.0.1700.77）的内部右侧：0不工作

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

#内容{
位置：相对位置；
顶部：24px；
高度：24px；
背景颜色：灰色；
}
#内容输入[type=“search”]{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
/*宽度100%*/
}

小提琴：

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

我可以通过向输入元素样式添加

width:100%

来解决这个问题；但我想知道，CSS是否有问题，或者这是浏览器的问题

---

提前感谢您提供的任何见解。

这不是一个bug，请参阅如何计算绝对位置替换元素的宽度：

“宽度”的使用值由内联替换元素确定

如果“width”的计算值为“auto”，且元素具有固有宽度，则该固有宽度为“width”的使用值

此时，图元尺寸被过度约束（其具有

宽度

、

左侧

和

右侧

），因此以下规则适用：

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

这就是你所看到的，对被忽略了。由于

始终有一个默认宽度，因此您应该设置自己的宽度（在本例中为100%），并删除

右侧

规则

---

对于更通用的解决方案，您可以将替换的元素包装在任何未替换的元素（如

）中，该元素将以

左

和

右

绝对定位，然后您可以为其他元素设置所需的宽度（注意，如果框模型为

内容宽度

，则

宽度

值将添加到任何填充和边框中）

---

例如，请参见。

听起来像是一个合法的bug，需要报告。传递观察：请记住，//不是CSS中的注释，它本身可能会导致一些奇怪的问题……但是，是的，我同意这是一个bug（并且可能会破坏很多东西，因为自发布以来，我已经看到这种技术被大量使用）。（关于那篇文章的评论22引用了规范中说这应该有效的部分。）@MattGibson，谢谢；我太习惯Sass了。修正了原来的问题。请注意，前一位，

//width:100%；

与当前问题无关。由于

div#content

是一个块元素，如果从

#content

中删除冗余的

width:100%

，它的工作原理应该是无效的，但仅此而已一个想法。即使在

#content

元素中没有

width:100%

，行为在给定的元素中看起来也是一样的。这就是您所指的吗？不，

width:100%；

对于块级未替换的元素来说毫无用处，您无论如何都应该删除它（请参阅）。我的意思是

宽度：100%；

在

@t.888上如果

右：0

和

宽度：自动

用于

输入

？

宽度：100%

从原始问题文本中删除。这是一个新的小提琴：。行为相同。

宽度：自动

用于输入元素：相同行为。