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

问题描述

场景

我用＆LT;按钮和GT;后者出现之后，就像在右端有一个+纯文本元素。

在点击一个div元素展开，揭示了一些信息。我想按钮元素是semanticaley正确重新present这样的...按钮...触发。

问题

所以我混了一些按钮和H2元素和我有一个视觉问题。重置毕竟默认用户代理样式的我希望每次我介绍给文档元素看起来平原和无样式。

但按钮元素不看的平原。它有一个文本，咯，文字缩进。

示例

首先，三个元素是＆LT; H2＆GT;＆LT;按钮＆gt;文字节点＆lt; /按钮＆GT;＆LT; / H＆GT; 和两个从上面只是＆LT; H2＆gt;文字节点＆lt; / H2＆GT;

的CSS

  * {
        / *复位的每一个元素外观* /
        背景：无重复滚动0 0透明的;
        边框：中无;
        边框间距：0;
        颜色：＃26589F;
        FONT-FAMILY：'PT三世窄'，无衬线;
        字体大小：16像素;
        字体重量：正常;
        行高：1.42rem;
        列表样式：无外无;
        保证金：0;
        填充：0;
        文本对齐：左;
        文字修饰：无;
        TEXT-INDENT：0;
}
 

其他元素的CSS

其他的元素使用背景图片，文本转换：大写的，就是这样。在Firebug的有否垫，边距，文本缩进或其他软或硬的性质可能误事。我打得四处显示设置，但它并没有修复任何东西，或使情况变得更糟。

问题

任何人能解释为什么，甚至重置默认样式后，对这种视觉失败＆LT;按钮和GT; 元素

解决方案

 按钮::  -  MOZ对焦，内，
输入::  -  MOZ-调焦内{
  边框：0;
  填充：0;
}
 

也加入这一个在CSS将解决您的问题。

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屋！