IE7 Div ошибка ошибка - PullRequest
Новая
       18

IE7 Div ошибка ошибка

0 голосов
/ 22 сентября 2011

Я столкнулся с очень странной ошибкой в ​​IE7. Вот моя структура HTML 

<div id="tt_message_kudos_top">
<div id="tt_kudo_position">
    <span> Kudos </span>
</div>
<div id="TT_kudos_reply">
    <div class="lia-message-actions lia-component-actions">

        <div class="lia-button-group">

            <span class="lia-button-wrapper lia-button-wrapper-secondary"><a href="/t5/forums/replypage/board-id/Services/message-id/1" id="link_35" class="lia-button lia-button-secondary reply-action-link lia-action-reply">Reply</a></span>    

        </div>
    </div>
</div>

Основной код CSS для управления этими div: 

#tt_message_kudos_top {
    float: right;
}
#tt_kudo_position {
    float: left;
}
#TT_kudos_reply {
    float: left;
}

Страница выглядит отлично в Firefox, Chrome, IE8,9. Тем не менее, div TT_kudos_reply автоматически расширяет пространство ширины и перемещается к правому краю этого div. Я попытался задать фиксированную ширину в TT_kudos_reply, чтобы решить проблему, однако содержимое TT_kudos_reply динамически изменяется. Смотрите скриншоты. Я также пытаюсь применить lia-button-wrapper, display: inline, это не повлияет.

Есть предложения? Благодарю.

Cheers, Цин

Screenshot1 Screenshot2

1 Ответ

0 голосов
/ 22 сентября 2011

Начальная мысль - очистить поплавок ответа. Это должно заставить его братьев и сестер перейти на следующую строку:

#TT_kudos_reply { clear:right; float: left; }

Но не видя больше вашего CSS, трудно сделать твердое предложение.

Если вы захотите провести простой рефакторинг, вы можете сделать следующее (при условии, что значение «Принять как решение» будет ниже значения «Ответить») ... Вместо div для обоих жестко укажите ширину tt_kudo, затем используйте список определений для кнопки ответа и подтверждения. 

<div>Kudo</div>
<dl>
    <dt>Reply</dt>
    <dd>Accept</dd>
</dl>

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

...