IE9 CSS布局问题

Question

I am having some layout issues with IE9 and I can't seem to get to the root of it. I am using Foundation 5 but I don't think that is the issue. I have this in a Foundation grid as large-12 so there is plenty of space.

This is what it looks like in IE9; There shouldn't be a gap.

HTML (this is just the html for 2 cards/links):

<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>

And here is the 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;
}

I can't seem to figure out what the issue is. If you happen to see it or know of some specific IE9 bug that would cause this, I would appreciate any guidance.

Answer 1

I think it's a container / width thing. It seems like you might be with holding some code (can we see parent items?), but this is what I would guess:

What ever is the container wrapper for the 2-columns (or if you have one for each 1 column), add a width: maybe even also add a min-width: make sure it is declared by position:relative; so it's the stable wrapper of the 2-columns. I'm assuming in IE-9 since things render slightly different, it could be resolving with not enough space, forcing that odd item up. You can also try increasing the width of said wrapper by a few pixels, maybe allowing for enough for it to snap into place in IE-9.

Answer 2

I figured it out. It wasn't a spacing issue. Plenty of room. To fix this I added a height to .linkPanel and that cleared it right up.