html - 入力ボタンは未フォーマットのまま

Question

フォーマットされた入力ボタンに関して非常に独特な問題があります。

最初のページで、1 行に独立したボタンをフォーマットするための「ボタン」という名前の CSS ルールを作成しました。それは完全に機能し、ボタンは以下のように表示されます

このボタンの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>

問題は、このルールをコピーして、2 ページ目の並列ボタン用にわずかに変更したため、ボタンがフォーマットされないことです。不思議なことに、dreamweaver では正しく表示されます

ただし、どのブラウザでも、フォーマットが失われます

これがパラレルボタンの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 ルールをこれらのボタンに適用しても、まだフォーマットされていません。

Answer 1

あなたのコードには2つのことがあります。

クラス名とID名を数字で始め ないでください。

この .2buttons の代わりに、この .buttons2 のように書きます。

＆ 2番

このように書く

border:none !important; 

これの代わりに：

border:none; !important

Answer 2

border:none; !importantする必要がありますborder:none !important;

クラス名は数字で始めることはできないため、クラス名を .2buttons ではなく .twoButtons (または別のもの) に変更します...

Answer 3

クラス名を数字で始めないでください! これは、Internet Explorer でのみサポートされています。見る

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

Answer 4

クラスの名前が数字で始まるという問題。それを変更する必要があります。