iphone - 缩放 Chrome/Safari 时 CSS 水平菜单中断

Question

我阅读了许多类似的主题并尝试了这些建议，但似乎我无法让它发挥作用。我是一个自学者，而不是专业人士，只是为我 parent 的公司建立了一个网站，我的菜单有问题。这在 IE 和 Firefox(至少我有的版本)中工作正常，但 Chrome 和 Safari 不喜欢它。最初在 Chrome 中它看起来不错，但如果你缩小它就会崩溃，而在 iPhone 和 iPad 的 Safari 中它更糟，因为我列表中的最后一项永远不会与其余项对齐。我读到的是我需要有 white-space:nowrap;在我的代码中，我这样做了，但没有帮助，我也在玩 position 属性，但没有一个值有效。也许关于我的菜单的一个奇怪的事情是每个 li 都有一个 id 标签，但那是因为我想要一个不同的图像悬停在每个元素上，这就是我可以做的事情。我真的很感激一些帮助，谢谢

网站链接和代码如下:http://redcoral-catering.com/index_catering_redcoral.php

iPhone 浏览器:

HTML:

<div id="navbar">
<ul>
<li id="zero"><a href="/index_catering_redcoral.php"> за нас</a></li>

<li id="one"><a  href="/redcoral_services.php"> услуги</a></li>

<li id="two"><a  href="/redcoral_cuisine.php">нашата кухня</a></li>

<li id="three" ><a href="/redcoral_gallery.php">галерия</a></li>

<li id="four"><a  href="/redcoral_movies.php">филми</a></li>

<li id="five"><a  href="/redcoral_celebs.php">кой се е хранил при нас?</a> </li>

<li id="six"><a  href="/redcoral_contacts.php">контакти</a>  </li>

CSS:

#navbar {
width: 894px;
height: 57px;
margin: 0px auto;
padding-left:25px;
padding-top:1px;
/*clear:both;*/
white-space:nowrap;

}


#navbar ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  list-style: none;
   margin: 0;
  padding: 0;
  width:100%;
}
#navbar ul li {
 /* display: block; */
  display: inline-block;
  position: relative;
  float: left;
 /* border-right: 1px solid #1A1A18;*/
}
#navbar ul li ul { display: none; }

#zero{
background-image: url(images/menu/short.png);
}
#one{
background-image: url(images/menu/short.png);
}
#two{
background-image: url(images/menu/short.png);
}
#three{
background-image: url(images/menu/short.png);
}
#four{
background-image: url(images/menu/short.png);
}
#five{
background-image: url(images/menu/short.png);
}
#six{
background-image: url(images/menu/short.png);
}
#seven{
background-image: url(images/menu/short.png);
} 


#navbar ul li a {
  display: block;
  height: 42px;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
 font-family: Calibri, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #851212;
    border: none;
  padding: 10px 28px 5px 28px;

}
#zero a:hover { background-image: url(images/menu/22.png); }
#one a:hover { background-image: url(images/menu/22.png);}
#two a:hover { background-image: url(images/menu/24.png);}
#three a:hover { background-image: url(images/menu/22.png);}
#four a:hover { background-image: url(images/menu/22.png);}
#five a:hover { background-image: url(images/menu/23.png);}
#six a:hover { background-image: url(images/menu/26.png);}


 #navbar ul li a:hover { 
    color: #DF0101;} 

Answer 1

尝试应用以下设置:

html, body { 
    margin:0; 
    padding:0; 
}
#navbar {
    width: 857px; /* updated width to center properly */
    height: 57px;
    margin: 0px auto;
    /*padding-left:25px;*/
    padding-top:1px; 
    white-space:nowrap; 
}

#navbar ul li a {
    display: block;
    height: 42px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: Calibri, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #851212;
    border: none;
    padding: 10px 26px 5px 26px; /* decreased padding very slightly */
}

也可以尝试将此元标记放在您的 header 中:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

如果这能解决问题，请告诉我。