html - 谷歌浏览器中的 div float 左错误

Question

我有一个 HTML 菜单结构:

<div id="menu_box">
        <a title="" class="menu_item_rfc"
             href="/main/menu/1">   
            <div class="menu_item">
                bla bla bla
            </div>  
        </a>
        <a title="" class="menu_item_rfc"
             href="/main/menu/2">   
            <div class="menu_item">
                bla bla bla
            </div>  
        </a>
        <a title="" class="menu_item_rfc"
             href="/main/menu/3">   
            <div class="menu_item">
                bla bla bla
            </div>  
        </a>
    <div id="search_box">
        <form id="search_form" action="" method="post">
            <div style="float:left;padding:4px 0 0 0;">
                <input id="search" type="text" value="поиск товара" name="search"/>
            </div>
            <div style="float:left;padding:4px 0 0 0;">
                <div id="search_btn"></div>
            </div>
            <div class="clear"></div>
        </form>
    </div>
    <div class="clear"></div>
</div>

和CSS:

#menu_box {
    display: table;
    /*margin:20px auto;*/
    width:715px;
    border:1px solid #efefef;
    -moz-border-radius-left:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    border-radius:5px;  
    margin: 23px 0 0 0;
    background-color:#efefef;
    float:right;
}
.menu_item {
    display: table-cell;
    float:left;
    margin:0;
    padding:7px 15px;
    height:18px;
    background-color:#fff;
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #ddd 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #ddd 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #ddd 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #ddd));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #ddd 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #ddd 100%);    
}
#search_box {
    display: table-cell;
    float:left;
    height:32px;
    background-color:#fff;
}

如您所见，menu_box 中的所有元素都向左浮动，而 menu_box 的宽度是固定的。

问题是最后一个 div，即使它只是一个 menu_item，在调整浏览器 Ctrl+、Ctrl- 大小时会下降，但在 Ctrl0 尺寸上它是可以的。很多用户不自觉地使用 dims +-。这个问题只在Chrome出现，在FF、Safari、EI都可以。我该如何解决这个问题？可能有人面临这个问题。提前致谢。

示例:

PS 我不认为这是 anchor 问题，我的意思是 anchor 包裹了 div menu_item。

Answer 1

这似乎是由于浏览器计算框的方式所致。

了解 box model ，并使用 border-box .那应该可以解决您的问题。

如果没有，我将不得不查看代码。也许将它上传到 JSFiddle？