与display：table / table-cell跨浏览器不同的行为 [英] Different behavior with display:table/table-cell across browsers

问题描述

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

我有一个由库创建的这些div / span / input的问题。

它使用引导类apply display：table 到div， display：table-cell 到span和 display：inline-block 输入。

我已经覆盖了一些CSS属性，以获得我的预期布局，在Chrome中测试。

但是，它在IE9和Firefox中无法正常工作。

我已将它复制到 jsFiddle ，这里是重要的代码：

HTML：

 < div> 
< span class =btn> 
< span>< / span> 
< / span> 
< input type =text/> 
< / div> 
  

CSS：

 code> 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 的解释是不同的？

跨浏览器解决方案？

解决方案

因为Firefox不支持 对表格单元格...

错误报告

---

问题是，你其实有些奇怪标记和CSS定位，您应该考虑在相对定位父级下嵌套绝对定位元素。

演示

演示2

  div {
 position：relative; 
 width：180px; 
 border：1px solid #ddd; 
 margin：20px; 
 height：30px; 
} 
 
 div输入{
 padding：6px; 
} 
 
 .btn {
 position：absolute; 
 height：30px; 
 width：30px; 
 background：#aaa; 
 right：0; 
 top：0; 
} 
  

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?

解决方案

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

这篇关于与display：table / table-cell跨浏览器不同的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！