放大浏览器上的主要内容重叠

所以我一直在用html5和css3开发一个网站，但遇到了一个问题。我的包装器是960px，在这个包装器中，我有2个DIV，1个向左浮动，那个的大小是240px，1个向右浮动，大小是695px。在浏览器中有一个缩放功能，我认为它可以模拟不同的分辨率。因此，当我缩小几次点击时，我的右浮动div会展开并位于左浮动div下方。看看屏幕截图：

正常：http://puu.sh/iMCEn/eff5baff4d.png
缩放：http://puu.sh/iMCGQ/98145b5788.png

这是我的CSS：

* { margin:0; padding:0;}
@font-face {
    font-family: reckoner;
    src: url(../fonts/Reckoner.ttf);
}
@font-face {
    font-family: champ;
    src: url(../fonts/champ.ttf)
}
body {
    background-color: #333333;
}
#wrap {
    width: 960px;
    margin: 150px auto 0 auto;
}
#banner {
    color: #e5e5e5;
    font-family: reckoner;
    font-size: 65px;
    text-shadow: 0px 0px 10px black;
    margin-left: 10.5px;
}
#main {
    height: auto;
    overflow: auto;
    background-color: #1a1a1a;
    border: 1px solid #404040;
    outline: 2px solid black;
}
#nav {
    font-family: champ;
    width: 240px;
    float: left;
}
#nav ul {
    list-style-type: none;
}
#nav ul li {
    text-decoration: none;
    background: #262626;
    padding: 7px;
    margin: 10px;
    outline: 1px solid #404040;
    border: 1px solid black;
}
#nav ul li:hover {
    background-color: #404040;
}
#nav ul a {
    text-decoration: none;
    color:#e5e5e5;
    font-size:17px;
    text-transform: uppercase;
    text-shadow: 0px 0px 10px black;
}
#content {
    float: right;
    width: 695px;
    min-height:500px;
    background-color: #262626;
    margin: 10px;
    outline: 1px solid #404040;
    border: 1px solid black;
}

这是HTML:

<!doctype html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <title>AAA GAMING - TRIPLE A GAMING</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id="wrap">
            <div id="banner">AAA GAMING</div>
            <div id="main">
                <div id="nav">
                    <ul>
                        <a href=""><li>Home</li></a>
                        <a href=""><li>Donate</li></a>
                        <a href=""><li>Chat</li></a>
                        <a href=""><li>How To Connect</li></a>
                        <a href=""><li>Application</li></a>
                        <a href=""><li>Contact</li></a>
                    </ul>
                </div>
                <div id="content">
                </div>
            </div>
        </div>
    </body>
</html>

如有任何帮助，我们将不胜感激！非常感谢。

缩放功能不会模拟不同的分辨率，更好的方法是调整浏览器窗口的大小。Zoom因舍入错误而破坏布局而臭名昭著，所以我不会太担心，但在这种情况下，解决问题很容易。

我在Chrome中复制了这个问题。

浮子通常会出现这样的故障，因为如果发生任何事情，使浮子旁边的剩余空间比浮动元件更宽，它们就会被向下撞击到浮动元件下方。这就是这里正在发生的事情。一般来说，我也避免将两个浮动元素并排放置。

两个基本解决方案是：

使元素足够窄，使其不会发生
使用浮子以外的东西(如绝对定位(

(2( 是我推荐的新布局的长期解决方案。但在这种情况下，实现(1(的一个快速解决方案是更改#content元素的边距。下：

margin: 10px;

添加行：

margin-left: -10px;

这修复了我浏览器上的问题，缩小到25%。它也不会以任何其他方式明显影响布局，因为它不会影响元素本身可见部分的宽度，它只影响容器的宽度，这可能会迫使它向下碰撞。

看起来您的main容器正在更改浏览器缩放的宽度。如果在其上设置min-width样式，则它将停止收缩超过临界点。我把它设置为min-width: 965px;，这似乎阻止了变焦的中断(至少在Chrome中是这样(。

相关内容

最新更新

热门标签：