谷歌浏览器：文字不会正确地最小化

Question

谷歌Chrome浏览器真的给我带来了障碍，我需要一些帮助。

我设置了一个菜单，文本在缩小时打包（< 50％）。我不想使用white-space：nowrap，我无法让菜单变宽。 Safari，Firefox，甚至IE浏览器都没有问题，但是当使用chrome缩小它时，它会强制换行。有任何想法吗。请让我知道如果需要更多的HTML/CSS，我试图把事情简单化：

CSS：

#page{ 
    display: block; 
    overflow:visible; 
    font:"Times New Roman", Times, serif; 
    text-align: center; 
    margin: auto; 
    width: 100%; 
    height: 1000px; 
    background:#956e41; 
} 

#header{ 
    width:auto; 
    max-width:1105px; 
    margin:auto; 
    position: relative; 
    overflow:visible; 
} 

#mainPicture{ 
    height:475px; 
    width: 1105px; 
    background-image:url(images/main.jpg); 
    background-repeat:no-repeat; 
    margin: auto; 
    position: absolute; 
} 

#headerFrame{ 
    height:80px; 
    margin: auto; 
    width: 1080px; 
    background-color: #a15535; 
    position: relative; 
} 

#logo{ 
    height: 150px; 
    width: 340px; 
    margin: auto; 
    background-image:url(images/logo.png); 
    float: left; 
} 

#menuFrame{ 
    width:auto; 
    max-width: 740px; 
    margin: auto; 
    width: 1080px; 
    display:inline-block; 

} 

#menu{ 
    width:auto; 
    font-size:16px; 
    font-weight:600; 
    margin: 0 0 0 0 ; 
    text-align:right; 
    display:inline-block; 
} 

#menu ul{ 
    margin-left: 80px; 
} 

#menu ul li{ 
    list-style:none; 
    float:left; 
    margin: 0 0 0 10px; 
    padding: 0 10px 10px 0;   
} 

HTML：

<div id="page"> 
    <div id="header"> 
     <div id="mainPicture"></div> 
      <div id="headerFrame" class="borderSq"> 
      <div id="logo"> 
       <!--<img src="images/logo.png" />--> 
      </div> 
      <div id="menuFrame">  
       <div id="menu"> 
        <ul> 
         <li class="border li">menu1<br /><span>text</span></li> 
         <li class="border li">THE menu1<br /><span>text</span></li> 
         <li class="border li">menu1<br /><span>text</span></li> 
         <li class="li">menu1<br /><span>text</span></li> 
        </ul>  
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

一些CSS的可能看起来多余的，我失去了我的酷，并开始只是扔东西在它......从来没有好。

演示：http://jsfiddle.net/X48ng/

^打开铬和缩小....你会看到（右太文本滚动）

约翰

Answer 1

好吧，我想我明白到底是什么引起，但它有点与你从这个想要什么小提琴，

有一点我设法停止菜单项缩小到33％的时候被推到一个新行通过移除margin-left小提琴搞乱后在上项目，

如下所示： js Fiddle

我能想到的唯一的事情是造成（当缩小到25％，但现在可以缩小到33％，而不是只有50％仍然发生）这是;当页面被调整大小时，页边距正在放大或沿着这些线，

如果有人可以帮助改进此答案，请做。

史蒂夫。