IE8 отображает только 1 из моих плавающих div

Question

Я использовал inline-block для отображения группы столбцов рядом друг с другом, но Safari добавлял между ними пробелы, несмотря ни на что.(хотя не Chrome, хотя они оба являются webkit).поэтому я переключился на плавающие элементы и упаковывал их в элемент inline-float.

в моей скрипке это работает в IE7-8, chrome, FF и safari.

разметка выглядит следующим образом:

<div id="wrapper" >
<div id="center">
    <span> Foo </span>
    <span> Bar </span>
</div>    
</div>

и CSS:

#wrapper{
    background: pink;
    text-align: center;
    font-size: 0; }

#center {
     background: yellow;
     display:inline-block;
     *display: inline;
     zoom: 1; }

span { 
    float: left;
    width:100px;
    background:blue;
    font-size:30px;
    line-height: 1;
    color:white; 
    text-align:center; }

http://jsfiddle.net/KKzuz/10/

но на моем живом сайте IE8 идет на мойпарад и показывает только 1 столбец.ie7 из всех вещей, удается не испортить это.

http://donutsites.com/sandbox01/portfolio/print/logos/

CSS-селекторы разные, но разметка довольно похожа ... насколько я могу судить в любом случае.хотя скрипка более упрощена, потому что я не пытаюсь запустить там плагин smoothdivscroll.

<div class="scrollWrapper">
 <div class="clearfix scrollableArea">

    <span class="scrollblock col">
        <a href="http://localhost/multi/portfolio-pieces/test-digitial-item-3/" class="checked" title="Test Digitial Item 3" rel="bookmark"><img width="175" height="345" src="http://localhost/multi/wp-content/uploads/arb_2010_formula_back-175x345.jpg" class="fluid attachment-digital-thumb wp-post-image" alt="arbor snowboard" title="" /></a>                              
        <a href="http://localhost/multi/portfolio-pieces/test-digitial-item-2/" class="normal" title="Test Digitial Item 2" rel="bookmark"><img width="345" height="345" src="http://localhost/multi/wp-content/uploads/JGWI_03-345x345.jpg" class="fluid attachment-digital-thumb wp-post-image" alt="JGWI_03" title="" /></a>                             
                                                                    </span><!--.col-->
<span class="scrollblock col">
    <a href="http://localhost/multi/portfolio-pieces/blue-mountain-state/" class="normal" title="Blue Mountain State" rel="bookmark"><img width="345" height="345" src="http://localhost/multi/wp-content/uploads/BMS-POSTERS-13.5x20_1-345x345.jpg" class="fluid attachment-digital-thumb wp-post-image" alt="BMS POSTERS 13.5x20_1" title="" /></a>                               
    <a href="http://localhost/multi/portfolio-pieces/battle-la/" class="checked" title="Battle LA" rel="bookmark"><img width="345" height="345" src="http://localhost/multi/wp-content/uploads/BATTLE_LA_Wall_1-345x345.jpg" class="fluid attachment-digital-thumb wp-post-image" alt="BATTLE_LA_Wall_1" title="" /></a>                                
    </span><!--.col-->

</div><!--.scrollableArea-->
</div><!--.scrollWrapper-->

и CSS:

div.scrollWrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 0;
    clear: both;
}

div.scrollableArea {
    position: relative;
    width: auto;
    height: 100%;

    overflow-y:hidden;
    overflow-x: auto;

    display: inline-block;
    zoom: 1;
    *display: inline;


}

.js div.scrollableArea {
    overflow: hidden;
}

.makeMeScrollable {
    width:100%;
    position: relative;
    height: 690px; 
}

.makeMeScrollable  .scrollableArea .scrollblock     {
    float: left;
    vertical-align: top;
    position: relative;
    max-height: 100%;


}




.scrollableArea img {
    height: 100%;
    max-height: 100%;
    width: auto!important;
    max-width: none;
    display: block;
}

/* digital taxonomy */

.col {
    max-width: 345px;
    max-height: 690px;
    width: auto;
}

.col a {
    display: block;
    max-height: 345px;
    height: 50%;
    width: auto;
}

Может кто-нибудь увидеть, что мне не хватает?

Answer 1

Это display:inline-block на div.scrollableArea. IE8 неправильно вычисляет ширину - он считает, что он должен быть шириной всего в один столбец.

Если вы используете встроенный блок просто для центрирования div, есть лучшие кросс-браузерные способы сделать это. Одним из способов было бы дать div.scrollableArea ширину и использовать margin:0 auto;