IE 和多个浮动元素

Question

我正在尝试使用浮动来定位多个按钮，它在所有浏览器中都可以正常工作。但 Internet Explorer 在第二个浮动按钮之后（或第三个浮动按钮之前）添加了一些线元素。 有人可以帮助我吗？ 这是一张图片！

这是我的代码：

<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 内。如果你这样做，浏览器将关闭 div 之前的 A ，然后你就会遇到各种奇怪的问题。 （而且您甚至没有关闭 2 个 A。）

请使用 span，如果需要，请放置 style="display: block ;” 在 span 上。