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 的宽度。

作为一个廉价的解决方案，＆＃34;我已将#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/

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

1 个答案: