html - ズーム時のページ全体のヘッダー

Question

http://jsfiddle.net/CPSKa/

私のサイトでは、ヘッダーにズームインすると、ヘッダーの下の行が短くなり始めますが、とにかくこれを防ぐことができます.

HTML コード:

<div id="main_header">   
 <div id="main_header_wrapper">
     <a href="index.php"><img src="http://chattrd.com/maint/images/logo.png" alt="Chattrd"/></a>

 <nav id="navigation">
 <a href="index.php" class="nav_icon">Home</a>
 <a href="#" class="nav_icon">Blog</a>
 <a href="login.php" class="nav_icon">Login</a>
 <a href="#" class="nav_icon">Sign up</a>
 </nav>

 </div>
 </div>

CSS コード:

body {
 padding: 0;
 margin: 0;
}
#main_header{
background:#FFF;
padding:10px 0; 
margin:auto;
border-bottom:1px solid #c5c5c5;}

#main_header_wrapper{
width:900px;
margin:auto;}

nav#navigation{
font-family: Arial;
padding-top: 2px;
text-align: right;
font-weight: bold;
float: right;
display: inline;}

a.nav_icon{
color:#000;
-webkit-transition:background 0.2s ease-in;  
-moz-transition:background 0.2s ease-in;  
-o-transition:background 0.2s ease-in;  
transition:background 0.2s ease-in; 
padding: 14px 25px;
text-decoration: none;}

a.nav_icon:hover{
background: #990033;
color: #FFF;}

Answer 1

これはうまくいきます：

#main_header{
width:900px;
}

Answer 2

#main_header_wrapperCSSをこれに変更するとうまくいくはずです：

#main_header_wrapper {
  max-width: 900px;
  margin: auto; }

ビューポートの幅を超えてズームインした後、900px の固定幅を持つことが div に影響を与えていました。max-width はそれを一直線に保ちます。

Answer 3

main_header 要素の css 幅を width: 100%; に設定します。