Поплавок влево - поплавковый правый перерыв в 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> 

И КСС:

#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 (меньшего изображения, как только взял экран от browserstack):

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

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 s - это просто ... ужасные, архаичные фрагменты CSS, которые имеют намного более простые и простые в использовании методы замены (display:inline-block - отличная отправная точка). Просто дружеский совет.

Answer 2

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