如何重置HTML5按钮元素的所有默认样式 [英] How to reset all default styles of the HTML5 button element

问题描述

场景

我使用< button> 元素， 右端。

在点击时，div元素将展开并显示一些信息。

问题

p>所以我混合了一些按钮和h2元素，我有一个视觉问题。在重置所有默认用户代理样式之后，我希望我对文档介绍的每个元素看起来都是平淡无奇的。

但是按钮元素看看那平原。它有一个文本，略有，文本缩进。

示例

首先，三个元素是< h2>< button>文本节点< / button> / h2>

$ b

$ b

CSS

  * {
 / *重置所有元素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; 
} 
  

其他元素的CSS

其他元素使用background-image，text-transform：大写，就是它。在Firebug有没有 paddings，边距，文本缩进或其他软或硬属性，可以搞砸了。

问题

任何人都可以解释为什么即使在重置默认样式之后，< button> 元素上存在此视觉故障吗？

解决方案

  button ::  -  moz-focus-inner，
 input ::  -  moz-focus-inner {
 border：0; 
 padding：0; 
} 
  

添加这一个也可以解决你的问题。

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.

Problem

So I have mixed some buttons and h2 elements and I have got a visual problem. After resetting all default user agent style's I expect that every element I introduce to the document looks plain and unstyled.

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>

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

The other elements use background-image, text-transform:uppercase and that's it. In Firebug there are no paddings,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.

Question

Can anybody explain why, even after resetting the default styles, there is this visual failure on the <button> element?

解决方案

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

add this one also in css it will solve your problem.

这篇关于如何重置HTML5按钮元素的所有默认样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！