私は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 では問題ありません。どうすればこの問題を解決できますか? 誰かがその問題に直面しているかもしれません。事前にthx。
例:
PSこれはアンカーの問題ではないと思います.div menu_itemをラップするアンカーを意味します.