1

在 Firefox 中测试布局时，我偶然发现了一些意外行为。似乎当父级设置为 display: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 和 Safari 中按预期运行，但在 Firefox 中不正常。问题是，为什么会发生这种情况？是否有解决方法或者我应该采取完全不同的方法？

提前致谢，

4

1 回答 1

2

这是 Gecko 中的一个已知错误。在此处查看Gecko 注释- 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;
 }
于 2013-11-13T21:55:22.887 回答