Question

我有一个水平滚动图像列表：

<ul>
  <li><img src="..."/></li>
  <li><img src="..."/></li>
</ul>

我将li设为inline-block并height: 100%：

ul {
  height: 100%;
  white-space: nowrap;
}
li {
  height: 100%;
  display: inline-block;
}
img {
  height: 100%;
  width: auto;
}

这似乎在我在macbook上运行的所有浏览器上运行良好。但它无法在IE10上运行。

在IE10中，li s彼此正确定位，但它们的宽度不适应图像的宽度（这是动态的，因为它遵循浏览器高度）。相反，它们具有全尺寸的宽度图像。

我认为在inline-block上设置li应该让他们适应他们的内容，但显然在IE10上并非如此。

我该怎么做才能解决这个问题？

网站的开发版本在线：http://clients-are-heroes.jackietreehorn.be/tombubbe/project/flor/

Answer 1

尝试向width: auto代码提供li。然后，考虑自动放在inline-block元素上的边距。

Answer 2

由于该网站现在处于正常状态，因此Microsoft Edge以外的浏览器存在问题。

例如，如果您从较小的Chrome窗口开始，加载页面，然后最大化窗口，您会发现Chrome无法正确调整图片大小。这不太理想。

在花了一些时间研究Chrome和Microsoft Edge之间的问题之后，我发现浏览器在内部图像不是自然尺寸时调整容器的大小并不是很好。几乎我测试的每个浏览器都在某种方式失败了。

我考虑过的一个潜在变通方法是在容器上使用display: table，在内容元素上使用值display: table-cell。如果你的图像大小相同，但是第二张图像是第一张和第三张尺寸的约200％，这会产生效果，这会导致最终版面尺寸的不规则。

由于您建议对Internet Explorer 10提供基准浏览器支持，因此Flexbox可能是我们的可靠替代方案。它简洁，在IE 10中得到很大程度的支持，并产生更一致的输出。

.container {
  display: flex;
  overflow-x: scroll;
  position: absolute;
  top: 0; left: 0;
  bottom: 0; right: 0;
}
  section {
    min-width: 496px;
    box-sizing: border-box;
  }
    img {
      height: 100%;
    }

<div class="container">
  <section>
    <p>weekendwoning aan een meer</p>
    <p>Deze vakantiewoning is gel...</p>
    <p>Het ontwerp evolueerde van...</p>
    <p>De woning  bestaat uit een...</p>
  </section>
  <img src="http://clients-are-heroes.jackietreehorn.be/tombubbe/wp-content/uploads/2015/10/foto-1.jpg" alt="">
  <img src="http://clients-are-heroes.jackietreehorn.be/tombubbe/wp-content/uploads/2015/10/beeld2.jpg" alt="">
  <img src="http://clients-are-heroes.jackietreehorn.be/tombubbe/wp-content/uploads/2015/10/DSC0014-waterkant-rechts.jpg" alt="">
</div>

这种方法虽然在很大程度上令人满意，但仍有一些缺点：

Chrome需要height: 100%才能获得准确大小的图片
Internet Explorer无法正常处理窗口大小调整

尽管有这些缺点，Chrome，Firefox，Internet Explorer和Edge都会产生相同的输出。

您的原始方法在Microsoft Edge和Google Chrome之间显示a couple of interop differences。鉴于此，我将为Edge团队开辟一个错误，以进一步调查差异。

`display：inline-block`在IE10中不起作用

2 个答案: