我有一个容器div(#columnsOne),设置为920px + 38px填充+2px边框,总宽度为960px。
(#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;
}
答案 0 :(得分:4)
您可以在自动溢出后设置overflow-x:hidden;
,并且在Safari中至少会应用该规则。
答案 1 :(得分:1)
我不确定overflow:auto;
是否是正确使用的解决方案 - 您可能希望了解浮点数以及它们如何控制文档流。
但是,我注意到.sectionright
上的宽度属性被禁用时,额外的空格会消失。