Почему Opera упаковывает список, который появляется встроенным во всех других браузерах? - PullRequest
Новая
       22

Почему Opera упаковывает список, который появляется встроенным во всех других браузерах?

0 голосов
/ 09 февраля 2012

Я поместил встроенный список шириной 1400px в div с шириной 800px.Предполагается, что список должен функционировать как панель прокрутки миниатюр изображений для быстрого доступа к изображениям.

Однако, хотя код работает как положено в Chromium (CoolNovo2), IE8 и FF10, Opera оборачивает список для отсутствияпричина, по которой я могу выяснить, или что я могу найти подсказку об онлайн.Несколько изображений (я использую jscrollpane для стилизации горизонтальной полосы прокрутки):

Нормальное поведение enter image description here

Opera enter image description here

Текст в сером поле - это тег ap, заключенный в промежуток для применения стиля - я подумал, что это может быть проблемой, так как при удалении текста Opera применила горизонтальную полосу прокрутки, как и ожидалось.Однако список изображений по-прежнему заключен в элемент div, поэтому центральная проблема остается: вертикальная полоса прокрутки подавляется, удаление элемента p просто предотвращает переполнение элемента div по вертикали, поэтому появилась горизонтальная полоса прокрутки - но список по-прежнему переносится.

Вот HTML-код, который я использую (отредактировано для краткости): 

<div id="thumbnails">
<ul id="imageList">
    <li><a href="#" id="chimg"><img src="01_thumb.jpg"></a></li>
    <li><a href="#" id="chimg2"><img src="02_thumb.jpg"></a></li>
    <li><a href="#" id="chimg3"><img src="03_thumb.jpg"></a></li>
    <li><a href="#" id="chimg4"><img src="04_thumb.jpg"></a></li>
    <li><a href="#" id="chimg5"><img src="05_thumb.jpg"></a></li>
    <li><a href="#" id="chimg6"><img src="06_thumb.jpg"></a></li>
    <li><a href="#" id="chimg7"><img src="07_thumb.jpg"></a></li>
    <li><a href="#" id="chimg8"><img src="08_thumb.jpg"></a></li>
    <li><a href="#" id="chimg9"><img src="09_thumb.jpg"></a></li>
    <li><a href="#" id="chimg10"><img src="10_thumb.jpg"></a></li>
    <li><a href="#" id="chimg11"><img src="11_thumb.jpg"></a></li>              
</ul>

<p id="musicList">
    <span><a class="track" href="javascript:;" data-mp3="" data-ogg="">Link</a></span>
    <span><a class="track" href="javascript:;" data-mp3="" data-ogg="">Link</a></span>
</p>
</div>

И CSS (снова отредактирован для удаления посторонних элементов): 

 #thumbnails {
    height: 160px;
    margin: 0 auto;
    overflow: auto;
    padding-top: 10px;
    width: 800px;
}
#thumbnails ul {
    list-style: none;
}
#thumbnails li {
    display: inline;
}
#thumbnails ul#imageList {
    margin-bottom: 0;
    width: 1400px;
}
#thumbnails ul#imageList img {
    width: 112px;
}
#thumbnails ul#imageList a img {
    border: medium none;
}
#thumbnails p#musicList {
    width: 1400px;
}
#thumbnails p#musicList span {
    display: block;
    float: left;
}

Любые мысли кого-либо

...