Проблема CSS с 'overflow-y: auto', которая создает проблему в Chrome, но не в Firefox - PullRequest
Новая
       53

Проблема CSS с 'overflow-y: auto', которая создает проблему в Chrome, но не в Firefox

0 голосов
/ 19 августа 2011

В моем приложении текст вводится пользователем и отображается в элементе div с фиксированной шириной и высотой и свойством overflow-y:auto. HTML выглядит так: 

<div class="description_div scroll-pane jspScrollable" style="overflow-x: hidden; overflow-y: hidden; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 290px; " tabindex="0">
    <div class="jspContainer" style="width: 290px; height: 160px; ">
        <div class="jspPane" style="padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width: 280px; left: 0px; ">
           <p>This is an original song written and performed by me, Jessica Speziale. I wrote this in early May 2011 :) Let me know what you think!</p>
           <p>Studio is 3 DAYS AWAY!!!  *dies*  I’ll be sending daily studio blogs via my newsletter!  Also, if you sign-up for the newsletter before August 31st, you’ll be entered to win a free copy of my EP!  Woot!! </p>
           <p>Sign up here: http://www.reverbnation.com/page_object/join_mailing_list/artist_868563</p>
        </div>
    </div>
</div>

Я указываю внешний div, а все остальные div динамически генерируются с помощью плагина jscrollpane . Вот CSS для внешнего Div: 

.description_div{
    float:right;
    width:280px;
    height:160px;
    overflow-y:auto;
    padding:5px;
    margin-left:5px;
}

Проблема в том, что это корректно отображается в Firefox, но не в Chrome. Вот изображение того, как оно отображается в Firefox:

Firefox-1 Firefox-2

и вот как это отображается в Chrome:

Chrome-1 Chrome-2

Как вы можете видеть, в Firefox он обрезает длинный URL в нижней части div, чтобы весь текст помещался в ширину div, и добавлялась вертикальная полоса прокрутки.

В Chrome он обрезает последний абзац текста внизу и добавляет только горизонтальную полосу прокрутки.

Почему это так, и есть ли решение, чтобы исправить это?

Ответы [ 2 ]

2 голосов
/ 19 августа 2011

Алгоритм переноса по умолчанию в Firefox может вставлять разрывы строк в прямом слэше, в Chrome - нет. Однако вы можете добавить стиль word-wrap: break-word; к внешнему элементу div для принудительного переноса. Убедитесь, что padding-right не установлен в 0 (из вашего примера кода неясно, является ли он в данный момент), или какой-то текст будет невидимым из-за полосы прокрутки.

0 голосов
/ 19 августа 2011

Попробуйте полное переполнение: авто. Ничего из этого -y или -x business, если вам не нужны другие настройки.

...