Question

的jsfiddle

HTML

<div class="min">
</div>

<br />

<div class="max">
</div>

<br />

<p>This one should be the same width as the one below, there are no long entries in the list</p>
<div class="scroller">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>five</div>
  <div>six</div>
  <div>seven</div>
  <div>eight</div>
  <div>nine</div>
  <div>ten</div>
</div>

<br />

<p>This one has the expected width, but the one above is wider because of the scrollbar</p>
<div class="scroller">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

CSS

.min {
  width: 200px;
  border: 1px solid red;
}

.max {
  width: 400px;
  border: 1px solid blue;
}

.scroller {
  display: inline-block;
  border: 1px solid black;
  overflow: auto;
  min-width: 200px;
  max-width: 400px;
  width: auto;
  height: 100px;
}

.scroller div {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100px;
}

问题

在Google Chrome中打开上面的jsFiddle，您会看到两个列表的宽度相同。但是在IE11中，由于垂直滚动条，顶部列表更宽。

这是为什么？有没有办法在IE11中设置列表的最小宽度，以便它像Chrome一样工作？

当垂直滚动条存在时，IE11中的最小宽度问题

0 个答案: