为什么当我向doctype添加xmlns时，文本框的宽度发生了变化?

How come when I add xmlns to my doctype, the widths of my text boxes change?

本文关键字：发生了 变化 文本 doctype 添加 xmlns 为什么      更新时间：2023-09-26
<!DOCTYPE html  xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

当我添加xmlns时，文本框变短了。它搞砸了我输入框的所有样式。为什么?

注意:我看到在我的开发控制台，这是添加到文本框:

input:not([type="image"]), textarea {
box-sizing: border-box;
}

这是什么，我如何摆脱它?

xmlns属性放在<html>开始标签上，而不是doctype。

如果<DOCTYPE html和空格之后的下一个字符不是>，那么接下来的六个字符必须是PUBLIC或SYSTEM，不区分大小写，否则页面将以quirks模式处理。您的文档类型正在导致怪癖模式。将xmlns属性去掉，doctype将产生标准模式。

重写当前设置: 

input:not([type="image"]), textarea {
    box-sizing: content-box !important;
}

默认的box-sizing属性是content-box。当您使用xmlns时，一些浏览器可能会更改框模型，因为它认为应该这样做。这可能是件好事。对于会导致问题的地方，只需重写它们的样式。

编辑:我刚刚注意到@Alohci做了什么，也就是说，你把xmlns放在doctype标签上，而不是html标签上。如果你愿意，你可以修补它，但我建议将属性移动到html，看看是否保持它们应该的方式。

doctype标签告诉浏览器想要使用哪种HTML。当没有指定时，每个浏览器都将使用默认值。不同类型的HTML内容的默认显示样式是不同的。所以当你指定文档类型时，你可能会选择一个不同于浏览器默认使用的类型。

这需要你指定一些样式，以确保你的文档在所有浏览器中看起来都像你期望的那样。

相关文章：