CSS: поля / отступы в IE приводят к неправильному размещению плавающих элементов

Question

У меня проблемы с тем, чтобы IE7 правильно отображал мои элементы (FF и Chrome работают как положено).Я хотел бы, чтобы кнопки «Удалить» (здесь диапазон с классом «sbutton») плавали полностью вправо.В IE кнопка s первая строка перемещается полностью вправо, как и ожидалось, но последующие строки плавают слева от кнопки над ними:

Something some other text ----------------------------------[Delete]
Something Else some other text ---------------------[Delete]--------

Это связано с отступами и полями наsbutton:

.sbutton {
    background-color: #2E3239; color: white; border: 1px solid gray;
    font-family: "Trebuchet MS"; font-size: 90%; padding: 1px 3px; margin: 2px;
    -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}

Если я удаляю отступы и поля, они все плавают, как и ожидалось.

Вот HMTL:

<li>
     <span class="left"><b>Something</b> (#1102) some other text</span> 
     <span class="right"><a href="#" class="sbutton">Delete</a></span> 
</li> 
<li>
     <span class="left"><b>Something Else</b> (#1103) some other text</span> 
     <span class="right"><a href="#" class="sbutton">Delete</a></span> 
</li> 

Я получаю похожее поведение на FF иХром, если я уберу внешний промежуток (тот, что с классом «право»).

Почему это происходит, и как правильно это сделать?

Answer 1

Вам нужно очистить ваши поплавки.Вот один из способов сделать это:

.clear {
    clear:both;
    font-size:0;
}

<li>
     <span class="left"><b>Something</b> (#1102) some other text</span> 
     <span class="right"><a href="#" class="sbutton">Delete</a></span> 
     <span class='clear'></span>
</li>

Answer 2

@ parand - это не обязательно, потому что IE имеет другую блочную модель, чем FF или Webkit (который, помимо прочего, является движком для Chrome и Safari).Если сделать это ясно, то это обходной путь из различий.