Question

我是html / css的新手，我遇到了问题。根据我的doctype是<!DOCTYPE html>（第一张图片）或<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">（第二张图片），我的表单输入的高度会发生变化：

input with html 5 doctype

input with html 4.01 doctype

我的问题是为什么会出现这种差异？在使用<!DOCTYPE html>时，我怎么能拥有第二种图像样式？

以下是表单的代码：

<form class="contact_form ajout-membre-form" action="prive2.php" method="post" id="contact_form">
            <ul>
                <li><input type="text" class="login" placeholder="Identifiant" name="login" required=""> <label><img src="images2/contact/contact.png" alt=""></label></li>

                <li><input type="password" class="password" placeholder="Mot de passe" name="password" required=""> <label><img src="images2/prive/password.png" alt=""></label></li>
            </ul><input type="submit" class="next" value="Connexion">

            <div class="clear"></div>
        </form>

Answer 1

您有两个不同的doctype definitions：

<!DOCTYPE html>

触发HTML5标准（从技术上来说还不是标准，所以它只是在大多数现代浏览器中触发标准模式）

和

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

触发HTML4 Transitional或quirks mode

正如您所观察到的，不同的模式具有不同的渲染。 Quirks模式用于保持与不遵守标准的旧浏览器的向后兼容性。

具体而言，您所看到的是difference in the way the two modes handle the box model。因此，要在HTML5 /标准模式下修复它，您只需从input元素中删除填充。

表单输入高度因html doctype而异

1 个答案: