3

ボタンとリンクのスタイルを同じに見えるようにしたいのですが、一般的にはこれを行いました。しかし、ボタンとリンクをまったく同じに見せることはできません。

  • ボタンの高さを 25px に設定しましたが、高さが 25px ではなく、Firebug と Chrome では 21px と表示されます。
  • 幅も同じです。設定した値よりも 4 ピクセル小さくなっています。
  • リンクには奇妙なマージンがありますが、ボタンにはありませんが、マージンを 0 に設定しました。

取るに足らないように聞こえますが、ボタンとリンクを一緒に配置すると、デザインのバグとして簡単に認識されます (レイアウトが壊れている場所に赤い線を追加しました)。ログインボタンはフォームを送信する実際のボタンであり、登録はボタンのように見える登録ページへのリンクです。 ずれた

ここで、ログイン ボタンは 106x21 ピクセル、登録リンクは 110x25 ピクセルです。

ここに私のスタイルがあります：

a.button,
button {
    display: inline-block;
    width: 110px;
    height: 25px;
    padding: 0;
    margin: 0;
    color: white;

    background: #7dbedb; /* Old browsers */
    background: -moz-linear-gradient(top,  #7dbedb 0%, #95c3ea 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7dbedb), color-stop(100%,#95c3ea)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #7dbedb 0%,#95c3ea 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #7dbedb 0%,#95c3ea 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #7dbedb 0%,#95c3ea 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #7dbedb 0%,#95c3ea 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dbedb', endColorstr='#95c3ea',GradientType=0 ); /* IE6-9 */

    text-shadow: 1px 1px 1px #757575;
    filter: dropshadow(color=#000000, offx=1, offy=1);

    border: 2px solid #79cee6;
    border-radius: 2px;
    text-align: center;
    text-decoration: none;
}

使用法：

<form ...>
    ...

    <button>Login</button>
    <a href="..." class="button">Register</a>
</form>

一言で言えば、 <button> と <a> を完全に同じに見せることはできません。

PS。onclickイベントでどこでもボタンを使用できることを知っています。すべての送信ボタンを onclick イベントのリンクとして作成します。しかし、私はこれをやりたくないので、フォームを送信したりリンクをたどったりするのに js は必要ありません。

4

2 に答える 2

6

ボタン (およびその他の入力) は、ブロック モデルに従いません。

ボタンのサイズを調整するには、次の方法があります。

  • ボタンにパディングを使用する
  • box-sizing: content-box;ボタンが標準モデルを使用するように設定する

2 番目の解決策では、同等の宣言のセット全体を使用する必要がある場合があります。

a.button,
button {
    ...
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

編集 ：

これを調整する際の問題は、ブラウザによってボタンが異なることです。

したがって、これは Chrome/ubuntu で機能します: http://jsfiddle.net/HAB6W/

これは FF/ubuntu で動作します: http://jsfiddle.net/Z5H5u/

ボタンの正確な外観を取得しようとするのが良い考えかどうかはわかりません。ピクセル精度のスタイルが必要な場合は、ボタンに標準要素 (通常はスパン) のみを使用することを知っています。

新しい編集：

これは役に立つかもしれません: Firefox で入力タイプ = テキストの垂直方向の配置を送信

于 2012-08-24T08:42:05.353 に答える
0

例

a,
input {
    font-family:arial;
    display:inline-block;
    border:1px solid black;
    background-color:blue;
    color:white;
    float:left;

    text-decoration:none;
    font-size:12px;

    **padding:2px 5px;
    height:20px;
    vertical-align:top;

    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -ms-box-sizing:content-box;
    -o-box-sizing:content-box;
    box-sizing:content-box;**
}
于 2014-07-30T22:40:31.693 に答える