Opera: keine Scrollbar bei nebeneinander liegenden inline-blocks

[Gunnar Bittersmann]

@@alle:

nuqneH

Die Listitems (variable Anzahl) einer Liste sollten nebeneinander dargestellt werden, bei Bedarf soll eine Scrollbar erscheinen.

Warum sträubt sich Opera? Wie lässt der sich dazu bringen es doch zu tun?

Testseite

relevantes Markup:

        <ul class="horizontalList">  
            <li>  
                <p>Lorem ipsum dolor sit amet.</p>  
            </li>  
            <li>  
                <p>Lorem ipsum dolor sit amet.</p>  
            </li>  
            <li>  
                <p>Lorem ipsum dolor sit amet.</p>  
            </li>  
            <li>  
                <p>Lorem ipsum dolor sit amet.</p>  
            </li>  
        </ul>

Stylesheet:

.horizontalList  
{  
    list-style: none;  
    margin: 0;  
    padding: 0;  
    white-space: nowrap;  
    max-width: 250px;  
    overflow: auto;  
}  
  
* html .horizontalList  
{  
    width: 250px;  
    overflow-y: hidden;  
    padding-bottom: 20px;  
}  
  
*:first-child+html .horizontalList  
{  
    overflow-y: hidden;  
    padding-bottom: 20px;  
}  
  
.horizontalList li  
{  
    max-width: 100px;  
    height: 100px;  
    overflow: hidden;  
    border: 1px solid silver;  
    margin: 3px;  
    padding: 3px;  
    display: -moz-inline-box; /* Firefox 2 */  
    display: inline-block;  
    vertical-align: top;  
}  
  
* html .horizontalList li  
{  
    width: 100px;  
    display: inline;  
}  
  
*:first-child+html .horizontalList li  
{  
    display: inline;  
}  
  
.horizontalList p  
{  
    margin: 0;  
    white-space: normal;  
}

Qapla'