Different behavior with display:table/table-cell across browsers

问题

I using Twitter's Bootstrap and this color picker: http://bootstrapformhelpers.com/colorpicker/.

And I'm having an issue with these div/span/input created by library.
It uses bootstrap classes the apply display: table to div, display: table-cell to span and display: inline-block to input.

I've overwritten some CSS attributes to get my expected layout, testing it in Chrome.

However, it does not work as expected in IE9 and Firefox. Works as expected in Chrome, Opera, IE10 (and IE9@IE10).

I've reproduced it in jsFiddle, here is the important code:

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

Why this is exactly happening? Every browser interpreting display: table/table-cell differently?

What is the cross-browser solution?

回答1:

Because Firefox doesn't support position: relative; on table cells...

Bug Report

The issue is that you are actually having some really weird markup and CSS positioning, you should consider nesting an absolute positioned element under a relative positioned parent.

Demo

Demo 2 (With a center black box)

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

来源：https://stackoverflow.com/questions/21554662/different-behavior-with-displaytable-table-cell-across-browsers

标签

html

css

cross-browser