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

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

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

使用以下样式：

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

可在此处找到一个工作示例：

这在Chrome、Safari和Opera中效果很好。但在FireFox中，图像覆盖整个页面，而在IE11中，图像根本不显示

---

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

如果您愿意，这里是您可以做的。 删除将背景图像设置为的位置。我知道你想把它和有边框的图像联系起来。但是，如果css放置阴影设置为inset，则可以实现这一点

这是代码添加回您的边界以及

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

更新小提琴

---

表格单元格元素实际上不应该有

位置：相对在它们上设置（我相信如果您试图在实际的表单元格
s上设置它，它将不起作用，尽管我可能是错的）

因为您使用的是CSS表，大多数现代浏览器都允许您在其上设置CSS表，但Firefox似乎坚持表单元格不允许的想法

你可以用几种方法来解决这个问题，但这将取决于你还做了什么

例如，您可以在表格单元格元素内的内容周围附加一个
，然后将其设置为
位置：相对取而代之。这样做的缺点是你需要给它一个设定的高度，如果你需要与内容一起流动的高度，这是行不通的

您还可以使用javascript/jQuery来实现这一点

这篇文章对此有一个很好的概述，因此我不想详细解释这个过程，因为他做得更好：


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

最后，（就我的建议而言，我确信这里没有列出更多的选项）-以及我的首选建议，您可以使用
display:inline block
构建两列布局，而不是
显示：表格单元格。这种方法将避免整个陷阱，同时也将减少获得效果所需的html元素的数量

这里有一个很好的阅读：

问题在于，您为.image div设置了display:table cell，然后在其中放入一个绝对定位元素，表单元格不能包含绝对元素，因为其中的元素不是从其父元素（尽管其父元素是相对的）而是从表（或display:table）获取坐标以进行定位
我的解决方案有点冗长，但它只是真正改变CSS以实现我认为您想要的

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

*，*：之前，*：之后{
-moz框大小：边框框；-webkit框大小：边框框；框大小：边框框；
}

然后，我在
.col-66
上设置了一个填充，以创建均匀的间距（边距不能用于
显示：表格单元格
）

最后，我将您的背景图像设置在
.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;
}

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

我猜Chrome很不错，忽略了标准或类似的东西。
出于我自己的好奇-为什么你希望图像的高度是宽度的五倍？实际上，真实的布局更像这样：我只想有一个简单的例子来讨论……这绝对是一个开始！我将尝试一下……明天……我真的希望避免使用javascript解决方案——但感谢您提供有关
内联块的信息！我会检查一下…
float
也可以工作，但它不能保持一切整洁，并且可能会导致其他样式的问题。但根据您的使用情况，这可能是一个有效的选项。是的，我知道–但可能有其他解决方案用于我的布局？至少在Chrome/Mac中，我在您的解决方案中根本看不到图像…如果您不想使用
box sixing
，那么您可以添加另一个容器来设置初始填充。哇，这在所有主流浏览器中都可以使用，而且没有像在Cams解决方案中那样剪裁图像的缺点！但是我们是否需要背景剪辑：填充框在
.content
中？哎呀！如果
.content
中没有足够的内容该怎么办：？？？我只能想到这个非常肮脏的黑客：但是因为我使用媒体查询，所以可能可以使用它…不，你不需要
背景剪辑
-好点。我没有通过并删除所有不必要的规则，我只是添加了修复。不确定我是否理解第二个问题？在小提琴中，您错过了
.outerTable
上的
显示：表格。如果你在我给你的提琴上少用些文字，看起来还可以吗
.outerTable>div
等于
.image
在本例中->
位置：相对
.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;
 }

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