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城市名称，并对齐（或应该）电话。并将电子邮件发送到左侧，每个文本都在自己的行中，同时将实际的电话号码和电子邮件地址放在相应文本的右侧。如果电子邮件地址长于电话号码，则应将它们右对齐，“电话：”和电话号码之间的间距更大。这是我期望看到的（除了IE9之外的所有浏览器）：

All browsers

这就是我在IE9中看到的（较小的图片，只是从browserstack中取出一个屏幕）：

enter image description here

我不明白电子邮件地址前的换行符。谁知道怎么解决这个问题？非常感谢！

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代替所有花车和废话：

#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是一个很好的起点）。只是一些友好的建议。

Answer 2

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

浮动左 - 只在IE9浮动右侧休息？

2 个答案: