Плавать влево - плавать вправо только в IE9?

Хм, я не могу с этим справиться, похоже, что все "способные" браузеры могут справиться с этим (включая 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">[email protected]</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):

Все браузеры

Это то, что я вижу в IE9 (меньшее изображение, как только что взятый экран из стека браузера):

введите описание изображения здесь

Я не понимаю перенос строки перед адресом электронной почты. Кто-нибудь знает, как это решить? Большое спасибо!

jsfiddle


html css internet-explorer line-breaks css-float
person Fygo    schedule 06.01.2014    source источник
comment
Вопрос: Почему вам нужно иметь два разных промежутка в абзаце, если вы уверены, что это значение, которое вам нужно сохранить? разве это не поможет? - ›‹ span class = email_text ›Электронная почта: [email protected] ‹/span›   -  person AKIWEB    schedule 07.01.2014

Ответы (2)


arrow_upward
1
arrow_downward

Хорошо, поэтому вы должны ДЕЙСТВИТЕЛЬНО очистить это (вы не очень эффективно используете классы, у меня просто не было времени, чтобы очистить его), но я обновил ваш 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">[email protected]</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%;
}

Это создает желаемый эффект. Вот jsFiddle, чтобы доказать это.

В качестве примечания: ознакомьтесь со свойством display и разнообразием его использования. floats - это просто ... ужасные, архаичные части CSS, которые имеют гораздо более чистые и простые в управлении методы замены (display:inline-block - отличная отправная точка). Просто дружеский совет.

person PlantTheIdea    schedule 06.01.2014
comment
Нет, без разницы. - person Fygo; 07.01.2014
comment
Интересно, это больше похоже на это! Нужно запустить сейчас, но я проверю это в течение 2-3 часов и оставлю отзыв. - person Fygo; 07.01.2014
comment
Очень хорошо, влияет ли на что-то установка меньшего% ширины? Думаю, я пойду с этим. Спасибо за вашу помощь! - person Fygo; 07.01.2014

arrow_upward
0
arrow_downward

У вас достаточно места для этого длинного адреса электронной почты? Похоже, ему не хватает места, поэтому он переходит к следующей строке.

person user3167160    schedule 06.01.2014
comment
Основной div имеет ширину 500 пикселей, чего должно быть более чем достаточно. Он переходит на следующую строку, как только она длиннее телефонного номера. - person Fygo; 07.01.2014
comment
Этот работает - проблема в том, что между электронным письмом: и адресом электронной почты слишком много места. Я не знаю заранее адрес электронной почты, который может быть очень большим. - person Fygo; 07.01.2014
comment
вместо плавающего вправо вы можете указать определенную ширину для левых элементов или правого отступа. Или уменьшите ширину контейнера. - person user3167160; 07.01.2014