输入按钮保持未格式化

时间:2012-09-26 07:40:17

标签: html css button

关于格式化输入按钮,我有一个非常奇怪的问题。

在我的第一页上,我创建了一个名为"按钮"的css规则。用于格式化独立于一行的按钮。它工作正常,按钮如下所示

enter image description here

此按钮的css位于

之下
.button {
    width: 100%;
    height: 15mm;
    background-color: #AAA;
    color: #FFFFFF;
    font-size: 20px;
    text-shadow: 0px -2px #888;
    border:none; !important
    -moz-box-shadow:    0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
    -webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
    box-shadow:         0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;

}

在html中,它看起来像这样:

<a href="dashboard.html">
  <input class="button" type="button" value="SUBMIT" action="dashboard.html" />
</a>

问题是,我已经复制了这条规则,并在第二页中对于平行按钮略有改动,并且它没有格式化按钮。奇怪的是,它似乎正好在Dreamweaver中

enter image description here

但在任何浏览器中,它都会丢失它的格式

enter image description here

这是并行按钮的css

.2buttons {
    width: 40%;
    height: 15mm;
    background-color: #AAA;
    color: #FFFFFF;
    font-size: 20px;
    text-shadow: 0px -2px #888;
    border:none; !important
    -moz-box-shadow:    0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
    -webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
    box-shadow:         0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;

}

这是html

<a href="report.html">
  <input class="2buttons" type="button" value="OK"/>
</a>

奇怪的是,即使您将第一个css规则应用于这些按钮,它们仍然保持未格式化。

4 个答案:

答案 0 :(得分:2)

您的代码中有两件事。

<强>第一 切勿使用数字编号开始&amp; ID 名称。

像这样写 .buttons2 而不是 .2buttons

<强>&安培;第二

像这样写

border:none !important; 

而不是:

border:none; !important

答案 1 :(得分:1)

border:none; !important应为border:none !important;

并将类名改为.twoButtons(或其他)而不是.2buttons,因为类名不能以数字开头......

答案 2 :(得分:1)

请勿使用数字开始课程名称!这仅在Internet Explorer中受支持。 见

http://www.w3schools.com/css/css_id_class.asp

答案 3 :(得分:1)

您的问题是,该类的名称以数字开头。你应该改变它。