溢出：自动导致滚动/滚动条显示在 Safari 中

Question

我有一个容器 div (#columnsOne) 设置为 920 像素 + 38 像素填充 + 2 像素边框，总共 960 像素宽。

(#columnsOne) 使用 CSS“overflow: auto;”垂直扩展并包含其中的所有内容。

这适用于所有浏览器，以垂直扩展 div，并在 Firefox、Chrome 和 IE7/8 上正确显示水平宽度。然而，在 Safari 上，会出现水平滚动，并向右侧滚动约 600px 的空白区域。

起初我以为我可能将边距/填充设置错误，这就是它可能正确扩展的原因，但我不可能在那里有 600px 的额外空间。

关于为什么会发生这种情况有什么想法吗？

http://www.timetoplaymag.com/giveaway/daily/

屏幕截图（新用户，所以我不能在这里发帖）： http://www.timetoplaymag.com/stacko/

许多编辑试图将代码放在这里，新手，抱歉

 <div class="columnsOne">

        <div class="sectionLeft">

            image/name of giveaway are here

        </div>

        <div class="sectionRight">

          sign in form here

        </div>

    </div>


#columnsOne, .columnsOne {
clear: both;
width: 958px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 20px;
background-color: #FFFFFF;
height: auto;
border: 1px solid #77787b;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: none;
overflow: auto;
}   


#columnsOne .sectionLeft, .columnsOne .sectionLeft {
float: left;
height: auto;
width: 590px;
background-color: #FFFFFF;
overflow: auto;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 19px;
padding-right: 19px;
padding-bottom: 19px;
padding-left: 19px;
}

#columnsOne .sectionRight, .columnsOne .sectionRight {
height: auto;
width: 270px
padding: 0px;
margin: 0px;
overflow: auto;
padding-top: 19px;
padding-right: 19px;
padding-bottom: 19px;
padding-left: 19px;
}

Answer 1

您可以在overflow auto之后设置overflow-x:hidden;，并且在safari上至少会应用该规则。

Answer 2

我不确定 overflow:auto; 是此处使用的正确解决方案 - 您可能需要阅读浮动以及它们如何控制文档流。

但是，我确实注意到，当 .sectionright 上禁用 width 属性时，多余的空间就会消失。