Question

我有很多部分在我的网站上运行，高度不同但都是100％宽度，每个部分都有相同的工作方式的子部分，并设置为显示：table然后有2列（有时3，有时1），列显示：inline-block，它们在chrome中工作正常，但在ie和ff中，列都是一个在另一个下面显示。

以下是一个例子：

HTML

<div id="features">

    <div class="container">
        <h3>Touch Tomorrow <strong class="blue">Now</strong></h3>
        <div class="column">
            <img src="images/zimx-swipe-10-front-2.png" class="image image-padding" />
        </div>
        <div class="column">
        <div class="spacer"></div>
            <div class="info" id="overview">
                <b4><p>The all new zimx Swipe 10 with</p>
                    <ul>
                        <li>RK3188 chip</li>
                        <li>10.1" LCD screen</li>
                        <li>2GB DDR3 RAM</li>
                        <li>Super fast wireless</li>
                        <li>Over one million apps</li>
                        <li>Android KitKat operating system</li>
                    </ul>
                    <p class="2">Packed into one of the thinnest cases around</p>
                </b4>
            </div>
        </div>
    </div>

    <hr class="grey" />

CSS

#features {
    background-color: #FFFFFF;
    width: 100%;
}

#features .container {
    display: table;
    width: 100%;
}

#features .container .column {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}

以下是该网站的链接问题： http://zimx.ukbigbuy.com/

Here is a comparison of the site in ie and chrome

Answer 1

稀释。因此，如果您的元素显示为内联块 - 因为您的列是 - 并且在第一个内联块元素的末尾和下一个内联块元素之间存在换行符，则在它们之间添加一个空格[~4px]。解决这个问题的方法是确保html在这些元素之间没有换行符或者在元素之间使用注释。

方法一：

<div class="column">
  <!-- Other Content -->
</div><div class="column">
  <!-- Other Content -->
</div>

方法二：

<div class="column">
  <!-- Other Content -->
</div><!--
--><div class="column">
  <!-- Other Content -->
</div>

或者你可以改写你的CSS而不是使用浮点数。

编辑：为了完整起见，处理这个流氓空间问题的方法很少。它们在下面的链接中有详细说明 - 但上述两种方法都可以正常工作。 http://css-tricks.com/fighting-the-space-between-inline-block-elements/

使用display：table和display：inline-block在IE或FF中没有正确对齐的Div

1 个答案: