0
I`ve了菜单的HTML的结构:DIV浮动左的错误
<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由宽度固定。
问题是,当调整浏览器的Ctrl +,Ctrl-大小时,最后一个div即使只是一个menu_item,也会下降,但在Ctrl0尺寸上没问题。 许多用户不自觉地使用那个变暗+ - 。 此问题仅在Chrome中出现,在FF,Safari,EI中没有问题。 我该如何解决这个问题?可能是有人面对这个问题。 Thx提前。
例子:
PS我不认为这是一个锚的问题,我的意思是锚包裹在div MENU_ITEM。
Thx,但'* {-moz-box-sizing:border-box; -webkit-box-sizing:border-box;盒子尺寸:边框; }'没有为我工作。 –
我必须看到代码,现在我不能说没有它。 – NamanyayG