Переполнение: автоматическое отображение полос прокрутки / прокрутки в Safari - PullRequest
Новая
       13

Переполнение: автоматическое отображение полос прокрутки / прокрутки в Safari

2 голосов
/ 19 апреля 2011

У меня есть контейнер div (#columnsOne), настроенный на 920px + 38px padding + 2px border для общей ширины 960px.

(# columnsOne) использует CSS "overflow: auto;" расширяться по вертикали и содержать все внутри него.

Это работает во всех браузерах для расширения div по вертикали, а также корректно отображает ширину горизонта в Firefox, Chrome и IE7 / 8. Однако в Safari появляется горизонтальная прокрутка, которая прокручивает около 600 пикселей пустого пространства вправо.

Сначала я подумал, что у меня могут быть неправильные поля и отступы, и поэтому он может расширяться вправо, но у меня нет места для 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;
}

Ответы [ 2 ]

4 голосов
/ 19 апреля 2011

Вы можете установить overflow-x:hidden; после автоматического переполнения, и в сафари, по крайней мере, будет применяться это правило.

1 голос
/ 19 апреля 2011

Я не уверен, что overflow:auto; является правильным решением для использования здесь - вы можете прочитать о плавающих и как они управляют потоком документов.

Однако я замечаю, когда свойство widthотключено на .sectionright, лишний пробел исчезает.

...