Html 如何重置 HTML5 按钮元素的所有默认样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16077341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reset all default styles of the HTML5 button element
提问by Tomkay
Scenario
设想
I use the <button>element which appeares just as plain text with an "+" on right end.
On click a div element expands and reveals some information. I think the button element is semanticaley correct to represent such a ... button ... trigger.
我使用显示<button>为纯文本的元素，右端带有“+”。
单击一个 div 元素会展开并显示一些信息。我认为按钮元素在语义上是正确的，可以代表这样一个......按钮......触发器。
Problem
问题
So I have mixed some buttons and h2 elements and I have got a visual problem. After resetting all default user agent style'sI expect that every element I introduce to the document looks plain and unstyled.
所以我混合了一些按钮和 h2 元素，但我遇到了视觉问题。重置所有默认的用户代理样式后，我希望我引入文档的每个元素看起来都很简单且没有样式。
But the button element does not look that plain. It has an text, slightly, text indention.
但是按钮元素看起来并不那么简单。它有一个文本，稍微，文本缩进。
Example
例子
First, three elements are <h2><button>text node</button></h2>and the two from above are just <h2>text node</h2>
首先，三个元素是<h2><button>text node</button></h2>，上面的两个只是<h2>text node</h2>
CSS
CSS
* {
/*Reset's every elements apperance*/
background: none repeat scroll 0 0 transparent;
border: medium none;
border-spacing: 0;
color: #26589F;
font-family: 'PT Sans Narrow',sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.42rem;
list-style: none outside none;
margin: 0;
padding: 0;
text-align: left;
text-decoration: none;
text-indent: 0;
}
Other element's CSS
其他元素的 CSS
The other elements use background-image, text-transform:uppercase and that's it. In Firebug there are nopaddings,margins,text-indents or other "soft" or "hard" properties which could mess things up. I played around with display settings but it does not "fix" anything or make it worse.
其他元素使用 background-image, text-transform:uppercase 就是这样。在 Firebug 中，没有填充、边距、文本缩进或其他“软”或“硬”属性，它们可能会搞砸。我玩过显示设置，但它没有“修复”任何东西或让它变得更糟。
Question
题
Can anybody explain why, even after resetting the default styles, there is this visual failure on the <button>element?
任何人都可以解释为什么即使在重置默认样式后，<button>元素上也会出现这种视觉故障？
回答by Manish Sharma
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
add this one also in css it will solve your problem.
在 css 中也添加这个，它会解决你的问题。
