Как сделать так, чтобы элементы отображались под <UL>в Firefox и IE8?

Question

Недавно я применил ответ, поставленный на вопрос " Как я могу получить <ul>, который будет равномерно распределен по области содержимого, в которой он существует? ", к моему списку вкладок.

У меня это работало нормально, но любые элементы после списка вкладок появлялись справа от элемента <ul/>, а не под ним. Я применил правило clear: both; к CSS для моего <ul/>, и это решило проблему в FireFox. Теперь элементы появлялись под списком, как я и ожидал ... за исключением того, что он не работает в Internet Explorer 8.

Это CSS для <ul/>:

#SearchForm ul {
    width: 100%;
    list-style: none;
    padding:0;
    margin: 0 0 5px 0;
    clear: both; 
}

Однако, если я изменю правило ширины на width: 101%;, это сделает все правильно в IE8 и Firefox. Почему это не работает в IE8? Установка чего-то на ширину 101% кажется немного глупой. Есть ли лучший способ для меня, чтобы все элементы отображались под <ul/> во всех браузерах?

Answer 1

Как предложил Йи Цзян, применение clear: both к элементу после #SearchForm ul решит проблему:

<div id="SearchForm">
</div>
<div id="someOtherElement" style="clear: both">
</div>

Причина, по которой он работает не так, как ожидалось, когда вы применяете clear к #SearchForm ul, заключается в том, что <ul> сообщает только очистке float, а не элементам после <ul>. Вот обновленный пример , показывающий его в действии.