2013-05-19 112 views
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提前。

例子:menu screen shot

PS我不认为这是一个锚的问题,我的意思是锚包裹在div MENU_ITEM。

回答

0

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

阅读关于box model,并使用border-box。这应该可以解决你的问题。

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

+0

Thx,但'* {-moz-box-sizing:border-box; -webkit-box-sizing:border-box;盒子尺寸:边框; }'没有为我工作。 –

+0

我必须看到代码,现在我不能说没有它。 – NamanyayG