html - 旋转的 div 导致 Internet Explorer 中的水平滚动条

Question

我的容器 div 外有一个 div (#shortcuts)，它旋转了 90 度。这是基本的想法:

<div id="wrapper">
  <div id="container">
    <div id="shortcuts">Some links</div>
    <div id="content">The main content</div>
  </div>
</div>

这是#shortcuts 上的CSS:

#shortcuts {
    position: absolute;
    left: 1020px;
    top: 20px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform-origin: 0 0;
    display: table;
    /* each link within the div is a table-cell */
}

在 Internet Explorer 11 中，它创建了一个水平滚动条。原因是它在旋转 #shortcuts div 之前渲染它的宽度。

作为“廉价修复”，我将#wrapper 设置为overflow: hidden。但是，我宁愿不设置它，因为较小的窗口应该在需要时创建水平滚动条。

jsfiddle:https://jsfiddle.net/0drcch87/4/

Answer 1

试试这个

#shortcuts {
    position: absolute;
    left: 0px;
    top: 320px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform-origin: 102%;
    display: table;
}

引用:https://jsfiddle.net/sachinkk/0drcch87/8/