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中即可。我该如何解决这个问题？可能是有人面对那个问题。 Thx提前。

实施例： menu screen shot

PS我不认为这是一个锚点问题，我的意思是用div包裹div menu_item。

Answer 1

似乎是因为浏览器计算框的方式。

了解box model并使用border-box。这应该可以解决你的问题。

如果没有，我必须看到代码。也许上传到JSFiddle？

div浮动左边谷歌铬的错误

1 个答案: