Question

我对IE9有一些布局问题，我似乎无法找到它的根源。我正在使用Foundation 5，但我不认为这是问题所在。我在基础网格中有这个12大，所以有足够的空间。

这就是它在IE9中的样子;应该没有差距。

IE9 screenshot

HTML（这只是2张卡/链接的html）：

<div class="linkPanel">
    <div class="lastMod">
        <span id="last_modified" class="thisDate">Wed, 17 Jun 2015 09:39:13  CDT</span>
        <div class="newItem">
            <i class="fa fa-bell"></i>
        </div>
    </div>   
    <a href="#">Claims Emergency Contact</a>                                                                                                          
</div>
<div class="linkPanel">
    <div class="lastMod">
        <span id="last_modified" class="thisDate">Wed, 17 Jun 2015 09:39:13 CDT</span>
        <div class="newItem">
            <i class="fa fa-bell"></i>
        </div>
    </div>   
    <a href="#">Claims Emergency Contact</a>                                                                                                          
</div>

这是CSS：

.linkPanel {
    width: 250px;
    margin-bottom: 20px;
    margin-right: 40px;
    border-radius: 0;
    background-color: #FFF;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12);
    cursor: pointer;        
    float: left;            
}
.linkPanel a {
    padding: 14px 10px 0 19px;
}
.newItem {
    float: right;
    padding: 10px;
}
.thisDate {
    display: none;
}

我似乎无法弄清问题是什么。如果您碰巧看到它或者知道某些特定的IE9错误会引起这种情况，我将不胜感激。

Answer 1

我认为这是容器/宽度的东西。看起来你可能会拿着一些代码（我们可以看到父项吗？），但这是我猜的：

2列的容器包装器（或者每1列有一个容器包装器），添加width:甚至可以添加min-width:，确保它由position:relative;声明{1}}所以它是2列的稳定包装器。我假设在IE-9中，因为事情略有不同，它可能在没有足够空间的情况下解析，迫使奇怪的项目上升。您也可以尝试将所述包装器的宽度增加几个像素，也许足以让它在IE-9中卡入到位。

Answer 2

我明白了。这不是间距问题。充足的空间。为了解决这个问题，我向.linkPanel添加了一个高度，并将其清除了。

IE9 CSS布局问题

2 个答案: