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中，这个比例的宽度并没有得到尊重。我在background: red ;上添加LI以使其更加明显。

我不想使用Flexbox。

Answer 1

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

vh是一个视口单元，现代浏览器广泛支持。您可以在此处详细了解视口单元：https://developer.mozilla.org/en-US/docs/Web/CSS/length

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

1 个答案: