溢出:自动导致滚动条/滚动条显示在Safari中 [英] Overflow:auto causing scrolling/scroll bars to show up in Safari

问题描述

我有一个容器div(#columnsOne)，设置为920px + 38px填充+ 2px边框，总宽度为960px.

I have a container div (#columnsOne) set up at 920px + 38px padding + 2px border for a total of 960px wide.

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

(#columnsOne) uses CSS "overflow: auto;" to expand vertically and contain everything inside of it.

这适用于所有浏览器以垂直扩展div，并且还可以在Firefox，Chrome和IE7/8上正确显示水平宽度.但是，在Safari上会出现水平滚动，并向右滚动大约600px的空白.

This works on all browsers to expand the div vertically, and also displays the horizonal width correctly on Firefox, Chrome, and IE7/8. However, on Safari, a horizontal scroll appears, and scrolls about 600px of blank space to the right.

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

At first I thought I might have the margin/padding set wrong, and that's why it might be expanding right, but there is no way I have 600px of extra space there.

关于为什么会发生这种情况的任何想法?

Any thoughts as to why this might occur?

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

屏幕截图(新用户，所以我不能在这里发布): http://www.timetoplaymag .com/stacko/

Screen shots (new user, so I can't post on here): 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;
}

推荐答案

您可以在自动溢出后设置overflow-x:hidden;，并且在野生动物园中至少将应用该规则.

You can set overflow-x:hidden; after overflow auto, and on safari at least that rule will be applied.

这篇关于溢出:自动导致滚动条/滚动条显示在Safari中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！