html - 宽度 <li> 根据高度适合内容 - IE/Chrome？

Question

我正在尝试设置轮播，但在 IE 和 Chrome 中有一个小的显示问题(FF 正常)。

body,
html{height:100%;}

ul{
  margin:0;
  padding:0;  
  list-style: none;
  overflow:hidden;
  display:inline;
  height:20%;
  width:100%;}

li{
  display:inline-block;
  margin-right:3px;
  height:inherit;
  background-color:red;}

li.last_item{margin-right:0;}

img{
  border: 0 none;
  display: block;
  filter: brightness(120%) saturate(130%) contrast(90%);
  vertical-align: middle;
  height:100%;}

<ul>
  <li>
    <img src="http://img4.hostingpics.net/pics/404788P1010437s.jpg" alt="{{txt_video_title}}" />
  </li>
  <li>
    <img src="http://img4.hostingpics.net/pics/404788P1010437s.jpg" alt="{{txt_video_title}}" />
  </li>
  <li>
    <img src="http://img4.hostingpics.net/pics/404788P1010437s.jpg" alt="{{txt_video_title}}" />
  </li>
  <li>
    <img src="http://img4.hostingpics.net/pics/404788P1010437s.jpg" alt="{{txt_video_title}}" />
  </li>
  <li>
    <img src="http://img4.hostingpics.net/pics/404788P1010437s.jpg" alt="{{txt_video_title}}" />
  </li>
  <li class="last_item">
    <img src="http://img4.hostingpics.net/pics/404788P1010437s.jpg" alt="{{txt_video_title}}" />
  </li>
</ul>

在我的示例中，我只是简单地放置了没有 JavaScript 的基本结构，以便更清楚。基本上，我的图片一个接一个地显示，我希望我的列表占据窗口高度的 20%。

当我在 FF 中调整窗口高度时没有问题，LI 高度适合页面的 20%，宽度适合图像。

但在 IE 和 Chrome 中，宽度比例不被遵守。我在 LI 上放了一个 background: red ; 以使其更明显。

我不想使用 Flexbox。

Answer 1

最简单的方法是将 height: 20%; 替换为 height: 20vh。

vh 是一个视口(viewport)单元，被现代浏览器广泛支持。您可以在此处阅读有关视口(viewport)单位的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/length