Question

IE中几乎没有问题，有没有完美的解决方案/解决方案？

寻找在子div

上使用CSS属性以下的解决方案

display: inline-block;

当父div有2个子div

时

第二个孩子div已预先定义width
根据可用宽度动态计算第一个孩子div width。

当子div具有下面片段中给出的CSS属性时，IE中的父div滚动指标存在有线行为。与其他浏览器（如Chrome，Firefox，Edge）相比，IE中的scrollHeight变化几个像素。

在显示inline-block并隐藏内容overflow时，是否有适当的解决方案来定位子div并且没有任何副作用。

  function metrics() {
    var parent = document.querySelector("#parent");
    var parentMetrics = document.querySelector("#parentMetrics");

    parentMetrics.innerText = 'Parent Scroll Height: ' + parent.scrollHeight + '\n' + 'Parent Client Height: ' + parent.clientHeight + '\n' + 'Parent Offset Height: ' + parent.offsetHeight;
  }
metrics();

#parent {
  background-color: orange;
  white-space: nowrap;
}

#firstChildDiv {
  background-color: brown;
  color: white;
  display: inline-block;
  width: calc(100% - 200px);
  height: 100px;
  overflow: hidden;
  vertical-align: top;
}

#secondChildDiv {
  background-color: skyblue;
  display: inline-block;
  width: 200px;
  height:100px;
}

<div id="parent">
  <div id="firstChildDiv">FIRST CHILD: Please RUN this snippet in IE, there is scroll problem in IE,  other browsers like, Chrome, Firefox, Edge behave properly.
  </div><!--
FIX FOR WHITE SPACE
  --><div id="secondChildDiv">
    SECOND CHILD
  </div>
</div>


<div id="parentMetrics">

</div>

  function metrics() {
    var parent = document.querySelector("#parent");
    var parentMetrics = document.querySelector("#parentMetrics");

    parentMetrics.innerText = 'Parent Scroll Height: ' + parent.scrollHeight + '\n' + 'Parent Client Height: ' + parent.clientHeight + '\n' + 'Parent Offset Height: ' + parent.offsetHeight;
  }
metrics();

#parent {
  background-color: orange;
  white-space: nowrap;
  font-size:0;
}

#firstChildDiv {
  font-size:14px;
  background-color: brown;
  color: white;
  display: inline-block;
  width: calc(100% - 200px);
  height: 100px;
  overflow: hidden;
  vertical-align: top;
}

#secondChildDiv {
  font-size:14px;
  background-color: skyblue;
  display: inline-block;
  width: 200px;
  height:100px;
}

<div id="parent">
  <div id="firstChildDiv">FIRST CHILD: Please RUN this snippet in IE, there is scroll problem in IE,  other browsers like, Chrome, Firefox, Edge behave properly.
  </div>
  <div id="secondChildDiv">
    SECOND CHILD
  </div>
</div>


<div id="parentMetrics">

</div>

Answer 1

这只是因为默认的浏览器样式。要规范化，您可以通过以下方式攻击line-height：

#parent {
    line-height: 1;
}

Answer 2

CSS修复下面的

解决了IE中不必要的scrollHeight问题

父级和子级元素具有相同的预定义 height
vertical-allign: middle;

＆＃13;

  function metrics() {
    var parent = document.querySelector("#parent");
    var parentMetrics = document.querySelector("#parentMetrics");

    parentMetrics.innerHTML = '<hr>Parent Scroll Height: <span>' + parent.scrollHeight + '</span><hr>' + 'Parent Client Height: <span>' + parent.clientHeight +'</span><hr>';
  }
metrics();

＆＃13;

#parent {
  background-color: orange;
  font-size: 0;
  height:100px;
}

#firstChildDiv {
  background-color: brown;
  color: white;
  display: inline-block;
  width: calc(100% - 300px);
  overflow: hidden;
  vertical-align: middle;
  height:100px;
  font-size: 18px;
}

#secondChildDiv {
  background-color: skyblue;
  display: inline-block;
  width: 300px;
  vertical-align: middle;
  height:100px;
  font-size: 18px;
}

#parentMetrics{
  background-color: yellowgreen;
  padding:10px;
}
span{
  color:red;
}

＆＃13;

<div id="parent">
  <div id="firstChildDiv">FIRST CHILD: Test in IE to see the difference.
  </div>
  <div id="secondChildDiv">
    SECOND CHILD
  </div>
</div>


<div id="parentMetrics">
</div>

＆＃13;

与其他浏览器相比，为什么在IE中滚动指标有所不同？有没有正确的解决方法？

2 个答案: