放大

时间:2015-06-02 15:23:13

标签: css google-chrome navigation width zoom

如果您在浏览器上放大110%或更多,我的问题可以看到here。 (它发生在Chrome上,我不确定其他浏览器)。

基本上,在“联系”之后,您可以在右侧看到几个像素的灰色条子。放大时按钮。我假设这是因为我设置了按钮,这样每个单词周围都会有一定数量的蓝色区域,并且在缩放时会变得混乱。我想知道是否有任何方法可以保持这种按钮大小的格式,但默认情况下也可以在放大时完全填充空间。我希望这是有道理的。

HTML:

<body>
<div id="wrapper">
<div id="container">
<nav>
    <div id="navigation">
        <ul>
            <li><a href="index.html">home</a></li><li><a href="about.html">about</a></li><li><a href="milk.html">milk</a></li><li><a href="farm.html">the farm</a></li><li><a href="contact.html">contact</a></li>
        </ul>
    </div>
</nav>

CSS:

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, address, blockquote {
    margin: 0px;
    padding: 0px;
    font-size: 16px/9px;
    font-style: normal;
}
html {
    background-color:#F8F7E4;
}
#container {
    width:955px;
    height:auto;
    background-color:#d2d2de;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}
#navigation {
    white-space: nowrap;
}
#navigation li {
    font: 35px Arial Black;
    display: inline;
    white-space: nowrap;
}
#navigation a {
    padding:9px 35px;
    background-color:#0080c2;
    color:#F8F7E4;
    text-decoration:none;
}
#navigation a:hover {
    background-color:#F8F7E4;
    color:#000;
}

此外,这个缩放问题如此重要的原因是这个网站将经常从我的父母那里看到&#39;电脑,他们将它发送到Chrome的125%缩放。

1 个答案:

答案 0 :(得分:1)

将背景颜色添加到div#navigation

#navigation {
background-color: #0080c2;
}