Question

我使用inline-block来显示彼此相邻的一堆列，但Safari无论如何都在它们之间添加了一个空格。（虽然不是Chrome，即使它们都是webkit）。所以我切换到浮动项目并将它们包装在内联浮动元素中。

在我的小提琴中，这似乎适用于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列。所有事情中的所有事情，都设法不破坏它。

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

CSS选择器是不同的，但标记非常相似......至此我可以告诉它。虽然小提琴更简化b / c我不是试图在那里运行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;

IE8只显示我的浮动div中的一个

1 个答案: