为什么IE11在应用平移时会将绝对定位的元素宽度添加到容器宽度？

Question

在实施工具提示时，我使用transform: translate将显示的工具提示内容相对于其触发器进行定位。

但是，在 Internet Explorer 11中，当悬停工具提示触发器时会出现滚动条，似乎IE会以某种方式将已转换的宽度添加到包含的部分宽度。

其他浏览器不显示此行为。我知道将-ms-overflow-x: hidden;添加到正文“解决”问题但我想解决它没有那个黑客。任何帮助表示赞赏。

请注意，我没有使用装饰样式来说明问题。

Fiddle

<section class="box">
  <h1>Heading</h1>
  <p>
    A beautiful section, lots of new info.
  </p>
  <span class="tooltip">
    Even more info.
     <span class="tooltip-content">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </span>
  </span>
</section>

body {
    background-color: #e3e3e3;
}

.box {
    margin: 4em auto 0;
    max-width: 400px;
    position: relative;
    background: #fff;
    border-radius: 5px;
    padding: 1em;
}

.tooltip {
    cursor: help;
    position: absolute;
    right: 1em;
    top: 1em;
}

.tooltip-content {
    display: none;
    position: absolute;
    width: 300px;
    padding: 6px 12px 9px;
    color: #fff;
    background-color: #696969;
    font-weight: normal;

    transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
}

.tooltip:hover .tooltip-content {
    display: block;
    z-index: 10;
}

Answer 1

这是因为弹出窗口没有left设置，在IE中，它会在tooltip元素中的文本之后立即渲染。

如果您像这样更新tooltip-content规则，则无处不在。

.tooltip-content {
  display: none;
  position: absolute;
  top: 100%;                     /*  added  */
  right: 100%;                   /*  added  */
  width: 300px;
  padding: 6px 12px 9px;
  color: #fff;
  background-color: #696969;
  font-weight: normal;
}

Updated jsbin

Stack snippet

＆＃13;

＆＃13;

body {
  background-color: #e3e3e3;
}

.box {
  margin: 4em auto 0;
  max-width: 400px;
  position: relative;
  background: #fff;
  border-radius: 5px;
  padding: 1em;
}

.tooltip {
  cursor: help;
  position: absolute;
  right: 1em;
  top: 1em;
}

.tooltip-content {
  display: none;
  position: absolute;
  top: 100%;
  right: 100%;
  width: 300px;
  padding: 6px 12px 9px;
  color: #fff;
  background-color: #696969;
  font-weight: normal;
}

.tooltip:hover .tooltip-content {
  display: block;
  z-index: 10;
}

＆＃13;

<section class="box">

  <span>Heading</span>

  <p>
    A beautiful section, lots of new info.
  </p>

  <span class="tooltip">
            Even more info.
            <span class="tooltip-content">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </span>
  </span>

</section>

＆＃13;

＆＃13;

＆＃13;