html - 宽度<li>适合内容，具体取决于高度-IE/Chrome？

我正在尝试设置轮播，并且在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中，该比例在宽度上没有得到尊重。我在background: red ;上放了一个LI，以使其更明显。

我不希望使用Flexbox。

最佳答案

最简单，最简单的方法是用height: 20%;切换height: 20vh。

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

关于html - 宽度<li>适合内容，具体取决于高度-IE/Chrome？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39492268/