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 boots

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

divinput {
    padding: 6px;
}

.btn {
    position: absolute;
    height: 30px;
    width: 30px;
    background: #aaa;
    right: 0;
    top: 0;
}