html - 向左浮动 - 向右浮动仅在 IE9 中中断？

Question

嗯，我无法解决这个问题，似乎所有“有能力的”浏览器都可以处理这个问题(包括 IE8，甚至没有能力，哈哈)，但 IE9 不能。我有以下 HTML:

<div class="contact_info_city" id="contact_info_cityX">
    <h3>City name</h3>
    <div>
        <div>
            <p class="office_tel"><span class="tel_text">Tel.:</span><span class="tel_no">+000 000 000 000</span></p>
            <p class="office_email"><span class="email_text">Email:</span><span class="email_address">somelonglongemailaddressthatdoesntfit@site.com</span></p>
        </div>
    </div>
</div>

还有 CSS:

#contact_info_cityX {
    width: 500px;
}
.contact_info_city h3 {
    text-align: center;
    font-size: 25px;
    letter-spacing: 0;
    height: 56px;
}
.contact_info_city > div > div {
    display: inline-block;
}

.contact_info_city > div {
    text-align: center;
    margin-top: 35px;
}
.office_tel {
    font-size: 20px;
}
.office_tel .tel_text {
    color: #262626;
    float: left;
}
.office_tel .tel_no {
    float: right;
}
.office_email {
    font-size: 16px;
    clear: both;
}
.office_email .email_text {
    color: red;
    float: left;
}
.office_email .email_address {
    color: red;
    float: right;
}

基本上它所做的就是:它放置一个 h3 城市名称，并对齐(或应该)电话。和电子邮件文本在左侧，每行各占一行，同时将实际电话号码和电子邮件地址放在相应文本的右侧。如果电子邮件地址比电话号码长，则应将它们简单地靠右对齐，并在“Tel.:”和电话号码之间留出更大的间距。这是我希望看到的(除 IE9 之外的所有浏览器):

这是我在 IE9 中看到的(较小的图片，只是从浏览器堆栈中截取的屏幕):

我不明白电子邮件地址前的换行符。有人知道如何解决这个问题吗？非常感谢!

jsfiddle

Answer 1

好吧，所以你真的应该清理它(你没有非常有效地使用类，我只是没有时间清理它)，但我更新了你的 HTML 以包含一些额外的类:

<div class="contact_info_city" id="contact_info_cityX">
    <h3>City name</h3>
    <div>
        <div>
            <p class="office_tel item"><span class="tel_text label">Tel.:</span><span class="tel_no value">+000 000 000 000</span></p>
            <p class="office_email item"><span class="email_text label">Email:</span><span class="email_address value">somelonglongemailaddressthatdoesntfit@site.com</span></p>
        </div>
    </div>
</div>

并使用 display:inline-block; 和 text-align 代替所有 float 和废话:

#contact_info_cityX {
    width: 500px;
}
.contact_info_city h3 {
    text-align: center;
    font-size: 25px;
    letter-spacing: 0;
    height: 56px;
}
.contact_info_city > div > div {
    display: inline-block;
}

.contact_info_city > div {
    text-align: center;
    margin-top: 35px;
}
.office_tel {
    font-size: 20px;
}
.office_tel .tel_text {
    color: #262626;
    text-align: left;
}
.office_tel .tel_no {
    text-align: right;
}
.office_email {
    font-size: 16px;
    clear: both;
    white-space:nowrap;
}
.office_email .email_text {
    text-align:left;
}
.office_email .email_address {
    color: red;
    text-align:right;
}

.item span {
    display:inline-block;
    vertical-align:middle;

    /* make inline-block work on IE6 and 7 */
    *display:inline;
    *zoom:1;
}

.label {
    width:10%;
}

.value {
    width:90%;
}

这会创建您正在寻找的效果。 Here is a jsFiddle to prove it.

作为旁注，请熟悉 display 属性及其各种用途。 float 只是……可怕的、陈旧的 CSS 片段，具有更清晰和更易于管理的替换方法(display:inline-block 是一个很好的起点) .只是一些友好的建议。