0

我在 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;
}

U 可以看到 menu_box 中的所有元素都向左浮动，而 menu_box 的宽度是固定的。

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

例子：菜单屏幕截图

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

4

1 回答 1

0

似乎是由于浏览器计算盒子的方式。

阅读有关box model和使用border-box 的信息。那应该可以解决您的问题。

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

于 2013-05-19T11:17:48.590 回答