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 では問題ありません。どうすればこの問題を解決できますか? 誰かがその問題に直面しているかもしれません。事前にt​​hx。

例:メニューのスクリーンショット

PSこれはアンカーの問題ではないと思います.div menu_itemをラップするアンカーを意味します.

4

1 に答える 1