在 Chrome 中呈现网站时，我注意到某些 <input>元素开始出现怪异。在检查 Chrome 内置开发人员工具中的元素时，我发现匹配 -webkit任何样式表中都不存在的 CSS 规则。比如下面的例子:
<input type="submit">
没有关于此类元素的规则，但这是 Crome 的开发人员工具显示的内容:
Matched CSS Rules:
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button {
-webkit-box-align: center;
...
}
有人知道我为什么会遇到这种情况吗？页面加载标准标题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML 5 没有被提及(如果这与它有任何关系......)。
谢谢。
最佳答案
这些 CSS 规则已融入您的浏览器。每个浏览器都有自己的。这就是多年来浏览器差异一直困扰着 Web 开发人员的原因。
您可以使用 CSS 重置或规范化器(两者的网络上都有很多)来避免这种情况，或者您自己覆盖它们。
最后，您还应该能够在浏览器中有效地更改这些内容，但是您应该知道您的网页看起来与其他人看到的不同。
关于css - Chrome 选择不存在的 CSS 规则 (-webkit)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16359855/