IE и несколько элементов с плавающей точкой

Question

Я пытаюсь расположить несколько кнопок с плавающей точкой, и она отлично работает во всех браузерах.но Internet Explorer добавляет какой-то странный элемент после плавающей кнопки 2 (или до третьей плавающей кнопки).Кто-нибудь может мне помочь? Вот картинка!

Вот мой код:

<style type="text/css">

            .button {
                width:auto;
                height:23px;
                border:1px solid #cccccc;
                border-radius:4px;
                background-image:url('bg_button.jpg');
                background-position:left;
                background-repeat:repeat-x;
                font-family:Tahoma;
                font-size:13px;
                float:left;
                margin-right:4px;
                cursor: pointer;
                padding-right:10px;
            }
...........
</script>


<div class="button">
        <a href=''>
        <div>
            &nbsp;
        </div>
        </a>
    </div>

    <div class="button">
        <a href=''>
        <div>
            Button 1 aksjd fklaj sdklfaj sdlkfasdf  
        </div>
    </div>

    <div class="button">
        <a href=''>
        <div>
            Button 1    
        </div>
    </div>

Answer 1

Поместите контейнер на всю ширину вокруг всего и поместите его.

Я не могу точно сказать, что это будет работать (так как я не могу воспроизвести его), но в IE плавающий родитель очень часто помогает.

Редактировать: Неважно.

Вы не можете поместить div в A. Если вы это сделаете, браузер закроет A перед div, и у вас возникнут всевозможные странные проблемы. (И вы даже не закрываете 2 своих A.)

Вместо этого используйте span, а если вам нужно, положите style="display: block;" на span.