向左浮动 - 仅在 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

您是否有足够的空间容纳这个长电子邮件地址？看起来它的空间已经用完了，所以它正在下降到下一行。

Answer 2

好的，所以你真的应该清理它（你没有非常有效地使用类，我只是没有时间清理它），但我更新了你的 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：

#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 属性及其各种用途更加舒适。 floats 只是......糟糕，古老的 CSS 片段，具有更清洁和更易于管理的替换方法（display:inline-block 是一个很好的起点）。只是一些友好的建议。