不同的行为与显示：跨浏览器表/表单元格(Different behavior with displa

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

而我在与库中创建这些DIV / SPAN /输入的问题。
它使用自举类的应用display: table到的div display: table-cell跨越并display: inline-block输入。

我已经覆盖了一些CSS属性，让我预计的布局，在Chrome测试它。

但是，按预期在IE9和Firefox这是行不通的。按预期工作中铬，歌剧，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不同？

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

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

错误报告

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

演示

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