Различное поведение с дисплеем: таблица/таблица-ячейка в браузерах

Question

Я использую Twitter-бутстрап и этот подборщик цветов: http://bootstrapformhelpers.com/colorpicker/.

И у меня проблема с этими div/span/input, созданными библиотекой.
Он использует классы начальной загрузки для применения display: table к div, display: table-cell для пролета и 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 позиционирование, то следует рассмотреть вопрос о вложенности a позиционированный элемент под позиционированным родителем 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; 
}