4

Google Chrome が本当に障害になっているので、助けが必要です。

メニューを設定していますが、ズームアウトするとテキストが折り返されます (<50%)。white-space: nowrap を使用したくありません。メニューの幅を広げることができません。Safari、Firefox、さらには IE - 問題ありませんが、クロムでズームアウトするとワードラップが強制されます。何か案は。さらに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/

^クロムで開き、ズームアウトします....表示されます（テキストも右にスクロールします）

ジョン

4

1 に答える 1

1

わかりました、私はそれを引き起こしているものを正確に理解していると思いますが、これからあなたが望むものとは少しいじっています.

フィドルを少しいじった後margin-left、#menu ul{}項目の を削除することで、33% にズームアウトするときに、メニュー項目が新しい行にプッシュされるのをなんとか止めました。

ここに示すように: js Fiddle (25% にズームアウトしても発生しますが、50% ではなく 33% にズームアウトできるようになりました)

これを引き起こしていると私が考えることができる唯一のことは次のとおりです。ページのサイズが変更されると、余白が拡大されたり、それらの線に沿って何かが拡大されたりします。

誰かがこの回答を改善するのに役立つ場合は、してください。

スティーブ。

于 2013-05-30T08:09:45.290 に答える