我的容器 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/
最佳答案
试试这个
#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;
}
关于html - 旋转的 div 导致 Internet Explorer 中的水平滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29676337/