Html 显示的不同行为：跨浏览器的表格/表格单元格

我正在使用Twitter的引导和这个颜色选择器：

我对库创建的这些div/span/input有问题。
它使用引导类将

display:table

应用于div，将

display:table cell

应用于span，并将

display:inline块

应用于输入

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

然而，它并没有像IE9和Firefox中预期的那样工作。在Chrome、Opera、IE10（和IE9@IE10)

我在中复制了它，下面是重要的代码：

HTML:

为什么会发生这种情况？每个浏览器都以不同方式显示：表格/表格单元格？

---

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

因为Firefox不支持

位置：相对在表格单元格上



问题是，你实际上有一些非常奇怪的标记和CSS定位，你应该考虑嵌套一个<代码>绝对< /代码>定位元素，在<代码>相对< /代码>定位父。


（中间有一个黑匣子）

美好的仅仅通过绝对改变相对值就可以使事情变得正确browsers@AndréFigueiredo是的，会的，这就是定位的目的：）
<div>
    <span class="btn">
        <span></span>
    </span>
    <input type="text" />
</div>

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

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;
}