PC端Chrome点击Submit按钮后页面自动放大问题求助

问题根源 #

你的核心问题是HTML结构严重违反规范，导致浏览器进入怪异模式（Quirks Mode），引发包括点击按钮页面放大在内的渲染异常；同时CSS中body的超大字体设置也可能加剧这一问题。

修复步骤 #

1. 修正HTML结构（最关键）

你的HTML存在多处结构错误：

• <head>被嵌套在<div id="header">内
• <link>标签直接放在<html>下，未归入<head>
• <li>直接出现在<head>中（列表元素必须在<body>内）
• <footer>所在的<div>放在了<body>之外

以下是修正后的完整HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title> this is a Title </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="header">
        <h1> GIVE ME A MILLION</h1>
        <li> <a href="cart"><img id="cart" src="shopping_cart_PNG66.png" width="10%"></a> </li>
    </div>
    <div id="Body">
        <div id="Navbar"> 
            <nav>
                <ul>
                    <li><a href="aboutrevision">About</a></li>
                    <li><a href="contactrevision">Contacts</a></li>
                    <li>Home</li>
                </ul>
            </nav>
            <form>
                <label for="Fname">first name:</label><br>
                <input type="text" id="Fname" name="Fname"><br>
                <label for="Lname">last name:</label><br>
                <input type="text" id="Lname" name="Lname"><br>
                <label for="Money">Give me Money:</label>
                <select id="Money" name="Money">
                    <option value="1Million">1 Million 💰</option>
                    <option value="1Billion">1 Billion 💰💰</option>
                    <option value="1Trillion">1 trillion 💰💰💰</option>
                    <option value="1Quadrilion">1 Quadrilion 💰💰💰💰</option>
                </select>
                <input type="submit" value="submit">
            </form>
            
            <br><br><br><br><br>this is a body<br><br><br><br><br>
        </div>
    </div>
    <div id="footer">
        <footer>
            <p>This is a footer</p>
        </footer>
    </div>
</body>
</html>

2. 调整CSS的字体设置

原CSS中body {font-size: 300%;}会让页面字体过大，在怪异模式下可能触发浏览器的自动缩放行为。建议调整为合理的默认值，同时优化CSS的层级结构（避免不必要的缩进嵌套）：

* {margin: 0;}
body {
    background-color: aqua; 
    text-align: center;
    font-size: 100%; /* 改为默认大小，或用16px、1rem */
}
#header {
    background-color: blue;
    padding: 35px;
    text-align: left;
    font-size: 80%;
}
nav {
    background-color: yellow;
    padding: 15px;
    font-size: 100%;
}
ul {
    text-align: center; 
    list-style-type:none;
}
li {
    display: inline-block; 
    font-family: 'Courier New', Courier, monospace; 
    padding: 30px;
}
footer {
    background-color: lime;
    padding: 35px;
    text-align: center;
    font-size: 100%;
}
#cart {
    position: absolute; 
    top: 0; 
    right: 0;
}
nav a {
    text-decoration: none;
    padding: 20px;
}
nav a:hover {
    color: red; 
    background-color: aliceblue;
}

3. 优化viewport标签（可选，增强兼容性）

在<head>中更新viewport标签，明确禁止用户缩放，避免移动端和怪异模式下的意外缩放：

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

原理说明 #

当浏览器遇到不符合规范的HTML时，会切换到怪异模式，该模式下浏览器会采用旧的、非标准的渲染规则，导致各种不可预期的行为（包括点击按钮时的页面放大）。修复HTML结构后，浏览器会进入标准模式，渲染行为将符合预期。

内容的提问来源于stack exchange，提问作者Osiris