html - 绝对定位的元素位置不相对于 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>的样式中。您可以使用内联style属性 (meh)或使用附加类或使用以下 CSS 规则来执行此操作：

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

但是，:not在 IE <9 中不起作用，因此（如果您关心 IE）您可能想要使用不同的选择器，例如

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

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