Question

在Firefox中测试布局时，我偶然发现了一些意想不到的行为。似乎当父级设置为显示：table-cell和position：relative时，它的子级在绝对定位并且给定100％宽度时不尊重父级宽度。而是将子宽度设置为父级的父宽度。我用小提琴重新创建了这个问题：

http://jsfiddle.net/D6Rch/1/

的结构为：

<div class="table">
  <div class="cell-1">
    <div class="content-1">this must be positioned absolutely</div>
    <div class="content-2">as these divs will be overlapping</div>
  </div>
  <div class="cell-2">
    <div class="advert">fixed width advert</div>
  </div>
</div>

.table { 
  width:600px;
  height:400px;
  border:3px solid black;
  display: table;
  position: relative;
  table-layout: fixed;
}

.cell-1 {
  width: auto;
  display: table-cell;
  background: yellow;
  position: relative;
  margin-right:10px;
}

.cell-2 {
  margin-right:10px;
  width: 100px;
  display: table-cell;
  background: pink;
  position: relative;
}

.content-1 {
  position: absolute;
  top: 10px;
  width: 100%;
  background: lightgreen;
  z-index: 5;
}

.content-2 {
  position: absolute;
  top: 50px;
  width: 100%;
  background: lightblue;
  z-index: 5;
}

.advert {
  position: relative;
  border: 1px solid red;
}

它在Chrome＆amp; Safari，但不适用于Firefox。问题是，为什么会发生这种情况？是否有针对此的解决方法，或者我应采取完全不同的方法？

提前致谢，

Answer 1

这是Gecko中的已知错误。请在此处查看 Gecko Notes - https://developer.mozilla.org/en-US/docs/Web/CSS/position

所以，你必须将内容div包装在另一个定位的div中。像这样 http://jsfiddle.net/D6Rch/4/

<div class="cell-1">
    <div class="wrapper">
      <div class="content-1">this must be positioned absolutely</div>
      <div class="content-2">as these divs will be overlapping</div>
    </div>
</div>

.wrapper {
  position: relative;
 }

Firefox表格单元格和全宽度绝对定位的孩子

1 个答案: