两个漂浮的div,一个在下面。适用于IE以外的所有浏览器

时间:2012-09-03 15:02:42

标签: html css internet-explorer internet-explorer-9

所以我有一个看起来像这样的html结构:

<div id="contact-wrapper">
    <div>
        <h4>België</h4>

        <p>Tuinwijklaan 79<br />
        9000 Gent<br />
        Tel. 0468/115967<br />
         info@echomedic.be<br />
         </p>
    </div>
    <div>
        <h4>Nederland</h4>

        <p>Kerkstraat 423-C<br />
        1017 HX Amsterdam<br />
        Tel: +32 468 11 59 67<br />
         info@echomedic.nl </p>
    </div><br />
    <a id="link-contact" href="#">Contacteer ons</a>
</div>

两个div显示在彼此旁边,以及它下面的链接,如下所示:

Divs like it should be

但在ie9中它显示如下:

ie9 divs

这是我对div的css:

footer div#contact-wrapper, footer h1 {
    float: left;
}

footer div#contact-wrapper div {
    margin: 16px 0px 0px 45px;
    float: left;
}

footer div#contact-wrapper div:first-of-type {
    padding-right: 30px;
    margin-left: 60px;
    border-right: 1px dashed #a3b0b9;
}

footer div#contact-wrapper a#link-contact {
    display: inline-block;
    background: #ffffff url('../img/contact-arrow.gif') no-repeat 95% center;
    border: 4px solid #bbc2c7;
    font-size: 12px;
    color: #bbc2c7;
    margin: 5px 0px 0px 60px;
    padding: 3px 0px 3px 5px;
    width: 150px;
}

1 个答案:

答案 0 :(得分:7)

删除<br>并将其添加到您的CSS:

footer div#contact-wrapper a#link-contact {
    clear: left;
    display: block;
}