Question

<!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;
}

这是什么以及如何摆脱它？

Answer 1

xmlns属性位于<html>开始标记，而不是doctype。

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

Answer 2

doctype标记告诉浏览器您要使用哪种HTML。当没有指定浏览器时，每个浏览器都将使用默认值。不同类型的HTML内容的默认显示样式将有所不同。因此，当您指定doc类型时，您可能选择了一个与浏览器使用的默认类型不同的文档类型。

这将要求您指定一些样式，以确保您的文档在所有浏览器中都如您所愿。

Answer 3

覆盖正在设置的内容：

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

默认的box-sizing属性为content-box。当您使用xmlns时，某些浏览器可能会更改框模型，因为它认为应该。这可能是一件好事。对于会给你带来问题的地方，只需覆盖他们的风格。

编辑：我刚刚注意到@Alohci所做的事情，即您将xmlns放在doctype标记而不是html标记上。您可以根据需要对其进行修补，但我建议将该属性移至html，看看是否能保持原样。