Firefox 和 IE11 中的流畅 CSS 布局中断

Question

我想在文本框旁边放置一个图像容器，使图像始终与文本的高度匹配：

<-         50%        ->  <-         50%        ->         
+----------------------+  +----------------------+
| Lorem ipsum dolor si |  | some                 |
| t amet, consectetuer |  | image                |
| adipiscingelit. Aene |  |                      |
| an commodoligula ege |  |                      |
| t dolor.             |  |                      |
+----------------------+  +----------------------+

对

+------------+  +------------+
| Lorem ipsu |  | some       |
| m dolor si |  | image      |
| t amet, co |  |            |
| nsectetuer |  |            |    Reduce
| adipiscing |  |            |<-- browser
| elit. Aene |  |            |    width
| an commodo |  |            |
| ligula ege |  |            |
| t dolor.   |  |            |
+------------+  +------------+

为了实现这一点，我将两个容器都包装在 div 中，并将图像显示为背景图像：

<div class="outerTable">
    <div>Lorem ipsum dolor sit amet, consectetuer</div>
    <div class="image">
        <div></div>
    </div>
</div>

具有以下样式：

.outerTable {
    width: 100%;
    display: table;
}
.outerTable > div {
    display: table-cell;
    border: 10px solid transparent;
    background-clip: padding-box;
    position: relative;
    background-color: #fff;
    padding: 2%;
    width: 50%;
}
.image {
    background-color: #fff;
}
.image > div {
    background-image: url(http://lorempixel.com/500/300/abstract/4);
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6%;
    background-clip: content-box;
    background-position: 0 0;
}

可以在此处找到一个工作示例：http://jsfiddle.net/KxFUL/

这在 Chrome、Safari 和 Opera 中运行良好。但是在 Firefox 中，图像覆盖了整个页面，而在 IE11 中，图像根本不显示……

我是否遗漏了什么——完全错误的概念？有任何想法吗？有什么不同的解决方案？

Answer 1

相对于表格单元格，您“不能”在表格单元格中进行绝对定位（不要问我为什么，我没有发明这个愚蠢的 CSS 规范）。在任何情况下，.image 都应该有 position:relative 的 position:absolute 才能工作。

我猜 Chrome 很好，它忽略了标准，或者类似的东西。

Answer 2

我的解决方案有点啰嗦，但它只是真正改变 CSS 以实现我认为你想要的。

所以首先我尝试使用填充而不是透明边框，我设置的第一个填充是在.outer-table 本身上。当然，该表是 100% 宽度，因此您需要按照 Paul Irish 的建议添加 box-sizing 修复：

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

然后，我在.col-66 上设置了一个填充以创建均匀的间距（display: table-cell 上不能使用边距）。

最后我把你的背景图片设置在.image而不是里面的空容器上，这意味着不需要绝对定位。

这里有新的 CSS：

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body {
    background-image: url(http://bradjasper.com/subtle-patterns-bookmarklet/patterns/concrete_wall.png);
    background-repeat: repeat repeat;
}
.outerTable {
    width: 100%;
    display: table;
    padding: 10px;
}
.outerTable > div {
    display: table-cell;
}
.col-33 {
    width: 33.333%
}
.col-66 {
    width: 66.666%;
    padding-right: 20px;
}
.content {
    padding: 3.4%;
    background-clip: padding-box;
    margin-bottom: 20px;
    background-color: #fff;
}
.content:last-child {
    margin-bottom: 0;
}
.image {
    background-image: url(http://lorempixel.com/500/300/abstract/4);
    background-size: cover;
    border: 10px white solid;
    background-position: 0 0;
}

And a fiddle to finish it off.

Answer 3

问题是您为 .image div 设置了 display:table-cell，然后在其中放入了一个绝对定位的元素，table-cell 不能包含绝对元素，因为其中的元素采用坐标定位而不是来自它的父级（虽然它的父级是相对的），但是来自表（或显示：表）

Answer 4

如果您愿意，可以执行以下操作。 删除您设置背景图像的位置。我知道你正试图将它与有边框的图像联系起来。但是你可以让它与设置为 inset 的 CSS 阴影一起工作。

http://jsfiddle.net/cornelas/KxFUL/4/

.outerTable > div {
  display: table-cell;
  border: 10px solid transparent;
  background-clip: padding-box;
  position: relative;
  background-size: cover;
  background-color: #fff;
  padding: 2%;
  width: 50%;
}
.image {
  background-color: #fff;
  background-image: url(http://lorempixel.com/500/300/abstract/4);
}

这里也是添加边框的代码

.image {
   background-color: #fff;
   background-image: url(http://lorempixel.com/500/300/abstract/4);
   -webkit-box-shadow:0 0 0 13px #FFFFFF inset;
   box-shadow:inset 0px 0px 0px 13px #ffffff;
 }

更新小提琴 http://jsfiddle.net/cornelas/KxFUL/6/

Answer 5

表格单元格元素并不是真的要在它们上面设置position: relative;（我相信如果你尝试在实际的表格单元格<td>s 上设置它是行不通的，尽管我可能是错的）。

因为您使用的是 CSS 表格，所以大多数现代浏览器都允许您对其进行设置，但 Firefox 似乎坚持使用表格单元格的想法，不允许这样做。

您可以通过几种方式来解决这个问题，但这取决于您还有什么其他方法。

例如，您可以在 table-cell 元素内部的内容周围附加一个<div>，然后将其设置为position: relative;。这样做的缺点是你需要给它一个设定的高度，如果你需要高度与内容一起流动，这将不起作用。

你也可以用 javascript/jQuery 来做。

这篇文章对此有很好的概括，所以我不会费心详细解释这个过程，因为他做得更好：

http://css-tricks.com/absolutely-position-element-within-a-table-cell/

请注意，他是在实际的表格元素上使用它，因此您需要进行一些更改。本质上，它与我上面列出的额外 div 的过程相同，它只是使用 JS 动态设置高度。您可以对其进行调整以更改窗口调整大小时的高度以使其具有响应性等...

最后，（就我的建议而言，我确信这里没有列出更多选项）- 我更喜欢的建议是，您可以使用display: inline-block; 来构建您的两列布局，而不是display: table-cell;。这种方式可以完全避免整个陷阱，并且还可以减少获得效果所需的 html 元素的数量。

这是一个很好的阅读：

http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/