HTML5 doctype导致webkit中按钮的呈现方式不同

我有一个带有按钮元素的表单。在Chrome中，当doctype为HTML4时，它呈现为圆形按钮。切换到HTML5 doctype时，按钮变为方形。有人能解释为什么会这样吗

好的，这里有两个例子的链接。第一个是html4，第二个是html5

---

在谷歌搜索之后，我读到html5表单按钮有一些新的职责和功能，这意味着按钮元素肯定被触动了，但我无法解释其中的区别。（）

---

然而，我确实隐约记得html5在定义内联元素和块元素的方式上也做了一些改变。你可能想试着给他们display:block或display:inline，看看它是否会影响其渲染/获取高度和宽度/形状的能力

在谷歌搜索之后，我读到html5表单按钮有一些新的职责和功能，这意味着按钮元素肯定被触动了，但我无法解释两者的区别。（）

---

然而，我确实隐约记得html5在定义内联元素和块元素的方式上也做了一些改变。您可能想尝试给它们display:block或display:inline，看看它是否会影响其渲染/获取高度和宽度/形状的能力

这肯定是因为怪癖模式，按钮的渲染方式不同。您应该只使用HTML5 doctype。FWIW在Opera中的quirksmode中并没有什么不同，似乎只有Webkit渲染引擎中的情况才是如此

这肯定是因为quirksmode，按钮呈现方式不同。您应该只使用HTML5 doctype。FWIW在Opera中的quirksmode中并没有什么不同，似乎只有Webkit渲染引擎中的情况才是如此

也许会给我们展示一些代码和CSS？如果只是您正在更改的doctype，浏览器可能会切换到不同的模式（可能是标准的怪癖）。你用什么样的CSS来设计这个按钮？它可能不是完全有效的CSS，在当前浏览器模式下，规则可能会突然被删除。这些元素的CSS完全相同。仅仅改变doctype就触发了改变。你能给我们css吗？也许你可以做一个JSFIDLE？你的链接在页面上只有HTML，没有CSS。答案很可能在CSS中。可能会向我们展示一些代码和CSS？如果只是您正在更改的doctype，浏览器可能会切换到不同的模式（可能是标准的怪癖）。你用什么样的CSS来设计这个按钮？它可能不是完全有效的CSS，在当前浏览器模式下，规则可能会突然被删除。这些元素的CSS完全相同。仅仅改变doctype就触发了改变。你能给我们css吗？也许你可以做一个JSFIDLE？你的链接在页面上只有HTML，没有CSS。答案很可能在CSS中。如果我将按钮内的img更改为display:block，则确实会使按钮显示为圆形。但这破坏了表单的布局，除此之外，我的主要问题是，如果css完全相同，为什么doctype会更改按钮的呈现。事实是，您可能忽略了一个事实，即您的css不完整，因为每个不同的doctype对元素的块级和内联级呈现都有影响，这意味着css的行为会有所不同。所以，请给我们你的css也。如果我改变了按钮内的显示：块，这确实使按钮显示圆形。但这破坏了表单的布局，除此之外，我的主要问题是，如果css完全相同，为什么doctype会更改按钮的呈现。事实是，您可能忽略了一个事实，即您的css不完整，因为每个不同的doctype对元素的块级和内联级呈现都有影响，这意味着css的行为会有所不同。所以，请给我们你的css也。