Question

您好我正在制作一个网站。问题是网站的尺寸在计算机上发生了变化。计算机屏幕尺寸不同，有些是不同的浏览器。例如，导航栏将改变宽度，并且在某些计算机上也会重叠。它还将在一台计算机上概述图像，并且它正在使用Internet Explorer，但在另一台运行Chrome（和不同屏幕尺寸）的计算机上，图像没有概述。我不知道为什么会这样，请帮忙！

我的HTML：

    <!DOCTYPE html>
<html>
<head>
    <title>
    Drippr
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1 id="title">Drippr</h1>
    <div id="navbar">

        <a href="http://drippr.me/" class="boxtext">
            <div id="box1">
                <p> Dripps </p>
                <img src="http://drippr.me/images/paper.svg" style="height: 40px">
            </div>
        </a>

        <a href="http://drippr.me/" class="boxtext">
            <div id="box2">
                <p> Bucket </p>
                <img src="http://drippr.me/images/bucket.svg" style="height: 40px">
            </div>
        </a>

        <a href="http://drippr.me/" class="boxtext">
            <div id="box3">
                <p> Settings </p>
                <img src="http://drippr.me/images/settings.svg" style="height: 40px">
            </div>
        </a>

    </div>

    <div id="hometop">
        <ul id="hometoplist">
            <li>TEST</li>
        </ul>
    </div>

    <table>
        <tr>
            <td>
                <div class="bubbles">
                </div>
            </td>

            <td>
                <div class="bubbles">
                </div>
            </td>
        </tr>
    </table>

    <div id="footer">

    </div>

</body>
</html>

我的CSS：

#title {
    color: #1c63ff;
    text-align: center;
    font-size: 35px;
    position: absolute;
    margin: auto;
    border: 1px solid white;
    margin-left: 45%;
    width: 120px;
    height: 45px;
    background-color: white;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

#navbar {
    height: 100%;
    width: 10%;
    background-color: #D1ECFF;
    border-radius: 0;
    position: fixed;
    margin-left: -10;
    top: -1;
    border: 2px solid #A1C6FF;
}

.boxtext {
    color: darkblue;
    font-weight: bold;
    text-align: center;
    margin: auto;
    text-decoration: none;
    font-size: 22px;

}

.boxtext:hover {
    color: darkblue;
    font-weight: bold;
    font-size: 25px;
}

#box1 {
    height: 18%;
    width: 90%;
    background-color: #5CBDFF;
    border: 2px solid #3385FF;
    border-radius: 8px;
    text-align: center;
    margin: auto;
    top: 5px;
    margin-left: 6.5px;
    position: absolute;
}

#box1:hover {
    background-color: #79AEFF
}

#box2 {
    height: 18%;
    width: 90%;
    background-color: #5CBDFF;
    border: 2px solid #3385FF;
    border-radius: 8px;
    text-align: center;
    margin: auto;
    top: 145px;
    margin-left: 6.5px;
    position: absolute;
}

#box2:hover {
    background-color: #79AEFF
}

#box3 {
    height: 18%;
    width: 90%;
    background-color: #5CBDFF;
    border: 2px solid #3385FF;
    border-radius: 8px;
    text-align: center;
    margin: auto;
    top: 285px;
    margin-left: 6.5px;
    position: absolute;
}

#box3:hover {
    background-color: #79AEFF
}

#hometop {
    height: 50%;
    width: 100%;
    background-color: #D7D7D7;
    border-bottom: 2px solid gray;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
}

.bubbles {
    height: 200px;
    width: 200px;
    border-radius: 100px;
    background-color: #99C2FF;
    border: 2px solid #1975FF;
    margin: auto;
    margin-top: 20px;
    margin-left: 160px;
}

#hometoplist {
    text-align: right;
    margin: auto;
    margin-top: px;
}

#footer {
}

Answer 1

我相信您的导航栏问题是由于不同显示器上的屏幕分辨率不同造成的。由于大多数用户的最小宽度为> = 1024 px，因此请尝试为网站的<body>设置1024 px的宽度，或者为网站正文中的所有内容设置div包装。

另外，我记得IE默认情况下有图片...尝试添加到你的css：

img {
    border:0;
    outline:none;
}

网站维度更改

1 个答案: