谷歌瀏覽器：文字不會正確地最小化

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％仍然發生）這是;當頁面被調整大小時，頁邊距正在放大或沿着這些線，

如果有人可以幫助改進此答案，請做。

史蒂夫。