绝对定位的元素位置与Chrome中的父容器无关

Question

我有一个简单的表单，我试图水平对齐两个字段，这将需要钱投入。我想用$（不应该是可编辑的）标记输入，以便人们知道投入资金。我最后用绝对定位的span元素做了这个。 jsfiddle位于http://jsfiddle.net/7tCfe/2/。

在Internet Explorer和Firefox中一切正常，但在Chrome中，第二个货币输入的货币标签一直位于左侧而不是第二个输入内。在jsfiddle中，第二个符号位于第一个货币区域的符号顶部。

如何让Chrome相对于父元素绝对定位元素？我已经尝试弄乱.two-column类并更改它的显示和位置，但它最终会破坏表单的其余部分。

Answer 1

将one-column课程添加到第二个<div>，并将clear: both;添加到以下<div>的样式中。您可以使用an inline style attribute （meh）或using an additional class或with the following CSS rule执行此操作：

.one-column + div:not(.one-column) {
    clear: both;
}

然而，:not does not work in IE <9，所以（如果你关心IE）你可能想要use a different selector，例如

.one-column + .one-column + div {
    clear: both;
}

是的，IE的CSS 3选择器支持非常糟糕。