多くの場合、コーダーは「デザイナーの魅力」に対処する必要があります。 「送信」や「ボタン」などのボタンも例外ではありません。 PSDレイアウトに従ってレイアウトを完了する必要がありますが、それでもトラフィックとクロスブラウザページの過剰な消費を忘れないでください。
通常、問題は、上の図のように、ボタンの角が丸くなったり、トリッキーな境界線やグラデーションが生じたりしたときに始まります。
今日、私はこの問題を解決した私の個人的な経験を共有したいと思います。
それでは、解決策に移りましょう。
このソリューションの選択は、IEでの9番目のバージョン（css3なし）での正しい表示の必須要件によるものです。
1.ボタンを3つの部分に分割します：左のフィレット、幅1ピクセルの中央ストリップ、右のフィレット：
2.ボタンが配置される「div」を作成し、その位置を設定します。
3.次に、「div」タグによって生成されたpngを「移動」し、中央にテキストを「透明」色で書き込みます（これは、ボタンが必要な幅まで伸びるために必要です）。
.button .left_part {
width: 21px;
height: 44px;
background-image: url(../images/left_part_button.png);
float: left;
}
.button .centr_part {
height: 44px;
background-image: url(../images/centr_part_button.png);
float: left;
font-size: 24px;
line-height: 41px;
color: transparent;
position: relative;
z-index: 0;
}
.button .right_part {
width: 21px;
height: 44px;
float: left;
background-image: url(../images/right_part_button.png);
4.次のステップでは、「送信」自体を追加し、幅1ピクセルの「div」にラップし、幅：100％および位置：絶対値に設定し、フォントの色に応じてスタイルを設定します。 結果の場所は、ボタンの3つの部分の前にあります。
すべてが正常に機能するように見えますが、IEのベテランがゲームに参加すると、問題が発生し、
IEは色を認識しません：透明。 「送信」と中央の「div」で完全に重複しないテキスト。 ボタンの背景に似た色を選択しましたが、私の状況では非常にシンプルでした。
その結果、例のように、クロスブラウザーの末尾ボタン「送信」が表示されます。
ソースコード
デモ
UPD。 この方法が選択された理由を追加しました。