谷歌浏览器：文字无法正确最小化

Question

谷歌浏览器：文字无法正确最小化

3

谷歌浏览器真的给我带来了很大的麻烦，我需要一些帮助。

我正在设置一个菜单，但是当缩小页面（<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/ ^使用Chrome打开并缩小页面……你会看到（也可以向右滚动文本）。

约翰

- S1r-Lanzelot

在浏览器中，字体可以缩小的极限是有限制的。为什么会成为问题？您是否期望用户将页面缩小到如此小的程度？如果他们做了这样意想不到的事情，当页面布局出现故障时，他们就不应该感到惊讶了。这相当于打开硬盘盒并使保修失效的虚拟等效物。 - Blazemonger

我无法重现这个问题。能否提供一张截图和一个演示？ - 2ne

@Parallel2ne 这是截图... http://oi40.tinypic.com/bgvdr5.jpg，希望这足够了。谢谢。 - S1r-Lanzelot

要在Fiddle中重新创建此内容，您需要缩小到约33％的大小，但我同意Blazemonger的评论，但我想不出任何逻辑原因为什么会发生这种情况...尽管您已经设置了定义的宽度和高度，但随着页面由于缩放而开始缩小，这可能会强制换行？这是我能想到的唯一的事情... - Steve P

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steve P · Accepted Answer

好的，我认为我完全明白了导致这个问题的原因，但是你需要从中找到一些需要的东西，

在调整了一下之后，我成功地通过删除 #menu ul{} 项上的 margin-left 来防止菜单项在缩小到33％时被推到新行，

如下所示： js Fiddle（当缩小到25％时仍然会发生，但现在可以缩小到33％而不仅仅是50％）

我能想到唯一可能引起此问题的原因是; 随着页面的调整，边距被放大或类似的情况，

如果有人能帮助改进这个答案，请务必这样做。

史蒂夫。