Question

我正在制作将轮换div的网站。我正在使用twitter bootstrap。其中一个div的代码是：

HTML：

div class="row">
    <div class="col-md-12 cold-sm-12 col-xs-12 rotadedDiv-one">
    </div>
</div>

CSS：

.rotadedDiv-one {
   background: #412B57;
   -webkit-transform: rotate(-1deg);
   -ms-transform: rotate(-1deg);
   transform: rotate(-1deg);
   padding: 130px 10% 80px 10%;
   z-index: 5;
}

我遇到的问题是，由于div被旋转，所以有一个小的溢出（大约10-20px）。我试图摆脱它：

html, body {
   overflow-x: hidden;
}

将overflow-x: hidden;添加到rotadedDiv-one，但它们无法正常工作。它们从底部移除滚动条，但如果单击鼠标滚轮并向右移动，或者选择文本并向右移动，您仍然可以向右滚动。

另外，我尝试使用overflow-x: hidden;制作包装div，但它没有用。任何帮助都意味着很多。谢谢。

Answer 1

您可以使用普通overflow代替overflow-x吗？ overflow有更好的支持，并且会阻止滚动条出现在x和y方向上。

html, body
{
    overflow: hidden;
}

overflow-x和overflow-y非常方便，但仍然列为＆＃34; experimental＆＃34;，并且可能无法与-webkit-transform等专有属性相匹配。

他们这样崩溃了：

overflow会更改元素在其中的任何子元素至少部分呈现在之外的任何位置时的行为方式。
overflow-x会更改元素在其任何子元素至少部分呈现在左侧或右侧之外的行为方式。
overflow-y会更改元素的行为，如果其子元素至少部分呈现在上方或下方之外。

Answer 2

使用：

Overflow: hidden;

希望有效。

溢出X无法使用CSS转换属性

2 个答案: