display:table/table-cell 的不同行为跨浏览器

Question

我使用 Twitter 的 Bootstrap 和这个颜色选择器：http://bootstrapformhelpers.com/colorpicker/。

我对库创建的这些 div/span/input 有疑问。
它使用引导类将display: table 应用于div，display: table-cell 应用于span，display: inline-block 应用于输入。

我已经覆盖了一些 CSS 属性以获得预期的布局，并在 Chrome 中对其进行了测试。

但是，它在 IE9 和 Firefox 中无法正常工作。在 Chrome、Opera、IE10（和 IE9@IE10）中按预期工作。

我已经在jsFiddle转载了，这里是重要的代码：

HTML：

<div>
    <span class="btn">
        <span></span>
    </span>
    <input type="text" />
</div>

CSS：

body {
   line-height: 20px;
}
div {
    display: table;
    position: relative;
    width: 140px;
}
span.btn {
    background: #ccc;
    display: table-cell;
    padding: 6px 12px;
    position: relative;
        left: 90px;
}
span.btn > span {
    background: #333;
    display: block;
    height: 16px;
    width: 16px;
}
input {
    border: 1px solid #ccc;
    display: inline-block;
    height: 20px;
    margin-left: -42px;
    padding: 6px 12px;
    width: 100%;
}

为什么会发生这种情况？每个浏览器对display: table/table-cell 的解释不同？

什么是跨浏览器解决方案？

Answer 1

因为 Firefox 不支持表格单元格上的position: relative;...

Bug Report

---

问题是你实际上有一些非常奇怪的标记和 CSS 定位，你应该考虑在 relative 定位的父元素下嵌套一个 absolute 定位元素。

Demo

Demo 2（带中心黑框）

div {
    position: relative;
    width: 180px;
    border: 1px solid #ddd;
    margin: 20px;
    height: 30px;
}

div input {
    padding: 6px;
}

.btn {
    position: absolute;
    height: 30px;
    width: 30px;
    background: #aaa;
    right: 0;
    top: 0;
}