Question

这个简单的代码在WebKit浏览器中运行良好，但在IE和Firefox中失败。我需要将img标记用于其他功能，因此background-image不是一个选项。

段

＆＃13;

img {
  max-width: 100%;
  height: auto;
}
.vgp-dtable {
  width: 100%;
  max-width: 860px;
  margin: 0 auto 1em;
  display: table;
}
.vgp-dtable .row {
  display: table-row;
}
.vgp-dtable .row .art,
.vgp-dtable .row .txt {
  display: table-cell;
  vertical-align: top;
}
.vgp-dtable .row .art {
  width: 30%;
  text-align: right;
}
.vgp-dtable .row .art img {
  width: auto;
  max-height: 280px;
}
.vgp-dtable .row .txt {
  width: 70%;
  text-align: left;
  padding-left: 8px;
}

＆＃13;

<div class="vgp-dtable">
  <div class="row">
    <div class="art">
      <img src="http://vgpavilion.com/mags/1982/12/vg/ads/003-004-005_tn.jpg">
    </div>
    <div class="txt">
      <p>Here's some sample text.</p>
    </div>
  </div>
  <a id="riddle-of-the-sphinx"></a>
  <div class="row">
    <div class="art">
      <img src="http://vgpavilion.com/mags/1982/12/vg/thumbs/007.jpg">
    </div>
    <div class="txt">
      <p>Here's some sample text.</p>
    </div>
  </div>
</div>

＆＃13;

在WebKit中，图像正确调整大小以适应30％宽的容器块，最大height为280px。但是，在Firefox和IE中，只有max-height被尊重，图像强制其容器变得超过30％。

一个简单的例子here。这个简单的示例有一个使用float方法的工作版本，该方法位于损坏的display:table实现之上。

您可以看到整页here

我尝试过多种容器组合，除非在Firefox或IE中以绝对术语指定，否则图像永远不会尊重width。在之前的例子中，我使用了background-image解决方案，该解决方案适用于所有经过测试的浏览器，但实际上并不是这样。我使用float而不是display: table-cell找到了一个解决方案，但令我感到困惑的是，在IE和Firefox中使用几乎相同的table方法打破了它，所以也许有人在那里可以发现我失踪的东西，或者我不应该添加的东西。

Answer 1

只需在此处添加table-layout:fixed：

.vgp-dtable {
  width: 100%;
  max-width: 860px;
  margin: 0 auto 1em;
  display: table;
  table-layout: fixed  /*added*/
}

在div中使用max-height，width auto来约束img

1 个答案: