Question

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

我对这些由图书馆创建的div / span /输入有疑问它使用bootstrap类，将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定位，您应该考虑将absolute定位元素嵌套在relative定位父元素下。

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

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

1 个答案: