3

送信ボタンとリンクをすべてのブラウザでボタンと同じように見せたいです。

Firefox3.5はうまく機能します。しかし、IE6、7、8はすべて異なる外観を持っています。その（どうやら）簡単な作業を手伝ってくれませんか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Crossbrowser css submit button, links</title>
    <style type="text/css">
        button {
            background:#FFE900;
            color:#000;
            padding:3px 5px 3px 5px;
            border:1px solid #000;
        }
        input {
            background:#FFE900;
            color:#000;
            padding:3px 5px 3px 5px;
            border:1px solid #000;
        }
        a {
            background:#FFE900;
            color:#000;
            padding:3px 5px 3px 5px;
            border:1px solid #000;
            text-decoration:none;
        }
    </style>
</head>
<body>
<a href="#">Buy now</a>
<input type="submit" value="Buy now" />
<button type="submit">Buy now</button>
</body>
</html>
4

6 に答える 6

2

リンクの背景画像を使用するのと同じ方法で、[送信]ボタンを画像に置き換えることができます。背景と境界線を取り除き、background-urlを入力セレクターに入れて、適切な幅と高さを指定するだけです。

input{
    background-color: white;
    border: 0;
    background-image: url('blah.png');
}
于 2009-07-18T18:43:33.967 に答える
1

使用する代わりにボタンtype="submit"用type="image"。

例えば：

<button type="image" src="path_to_your_image.png">Buy now</button>

リンクの場合、cssを使用してリンクの背景を設定できます。

background-image: url('path_to_your_image.png');
于 2009-07-18T18:40:35.080 に答える
1

Firefox 3.5 でもまったく同じには見えないので、完全に同じに見えることは決してないということを、あなたは理解していると思います。

純粋にスタイルは別として、それらは常に異なる動作をします。たとえば、タブやクリックに対するボタンの反応は異なります (一部のブラウザーではテキストが「押し下げられます」)。リンクとは対照的に、ボタンはリンク先の URL を表示しません。また、リンクのテキストは選択できますが、リンクのテキストは選択できません。ボタン。

ただし、IE6 と 7 の最も明白な相違点は非常に簡単に修正できます。

<button>これをボタン (および<input>)の CSS に追加します。

overflow: visible;

visibleIE6/7 のスタイルシート内にのみ配置できますが、これは実際にはデフォルト値であるため、他のブラウザーには影響しません。しかし、何らかの理由で、IE6 と IE7 でのリンクの場合と比較して、パディングの不一致が修正されます。

そして、リンクの CSS に以下を追加します。ボタンと同じように、リンクをブロック要素のように動作させるには、すべてのブラウザでこれが必要です。

display: inline-block;
于 2009-07-18T20:23:59.087 に答える
1

これは古い質問であることは知っていますが、最近この問題に遭遇したため、レイアウトで画像を使用したくありませんでした。私が思いついた解決策 (他の人が提案したように、リンク ブロックを作成した後) は、境界線、フォント、および背景色を明示的に設定することでした。境界線を一致させるには、それらを個別に設定します。もともとはアウトセット ボーダーを使用しようとしていましたが、上、左、下、右に特定の色を使用したソリッド ボーダーを使用した方がうまくいきました。(Firefox が境界線に使用していた色に基づいて色を選択しました。) これが誰かの役に立てば幸いです。また、リンクとボタンにボーダー半径を追加すると、それらが少しきれいになります。

于 2012-06-28T22:03:06.260 に答える
0

均一な外観が必要な場合は、画像送信ボタンを使用する必要があります。

于 2009-07-18T18:34:01.193 に答える
0

いつでもJavaScriptフレームワークを使用して、要素をよりスタイリング可能な要素に置き換えたり、ブラウザー固有のスタイリングにMSIEの条件付きコメントを使用したりできます。

悲しい真実は、クロスブラウザのピクセルの完全性は純粋なCSSとボタンでは不可能に思えるということです。

于 2009-07-18T18:51:38.680 に答える