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

Question

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?

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