多くの場合、ボタンの標準的な外観は、デザイナーが思いついたデザインコンセプトと組み合わせることができないため、彼はボタンを描きます。
彼がそのようなボタンを見たとき、タイプセッターは通常何をしますか？ 正確に、単純に、そのまま切り取り、写真としてレイアウトに挿入します。
例：
< a href ="some_page.html" >< img src ="button.gif" alt ="Button" ></ a >
< input type ="image" src ="button.gif" alt ="Button" >
* This source code was highlighted with Source Code Highlighter .
すべてが単純に思えますが、レイアウト設計者は各フォームまたはリンクの新しい画像を切り取らなければならず、それによって大量の画像が生成され、貴重な時間を無駄にします。
この問題に対して次のアプローチを提案します（誰かがすでにこの方法を考え出したかもしれませんが、私はまだそれを見ていないと言ってすぐにそれを取り去ります）。
このために必要なもの：
実際のHTMLは次のとおりです。
< span class ="button" >< a href ="#"> Button </ a ></ span >
<!---->
< span class ="button" onClick ="alert(1);" >< b > Button </ b ></ span >
<!---->
< p >< span class ="button" >< input type ="button" value =" Button " ></ span ></ p >
<!---->
< span class ="button" >< a href ="#" >< img src ="i-article.gif" alt ="" > Button </ a ></ span >
* This source code was highlighted with Source Code Highlighter .
CSS：
<!--[if lte IE 6]>
<style type="text/css">
body {
behavior:url("csshover2.htc");
font-size:16px;
}
</style>
<![endif]-->
< style type ="text/css" >
.button {
display:inline-block;
line-height:22px;
padding:0 11px 0 0;
background:url(bg-button-r.gif) right 0 no-repeat;
cursor:pointer;
}
.button a, .button b, .button input {
display:inline-block;
padding:0 0 0 11px;
font-family:Arial;
font-size:13px;
font-weight:normal;
color:#000;
text-decoration:none;
outline:none;
background:url(bg-button-l.gif) 0 0 no-repeat;
border:none;
cursor:pointer;
}
.button input {
height:22px;
}
.button img {
vertical-align:middle;
border:none;
}
.button:hover {
background-position:100% -22px;
}
.button:hover a, .button:hover b, .button:hover input {
background-position:0 -22px;
margin:0;
padding:0 0 0 11px;
}
.button:active {
background-position:100% -44px;
}
.button:active a, .button:active b, .button:active input {
background-position:0 -44px;
}
</ style >
* This source code was highlighted with Source Code Highlighter .
ここでケースを見ることができ
ます 。
このすべてがIE6 / 7/8、Opera 9.62、Firefox 3.0.8、Chrome 1.0.154.53でテストされました。
ただし、IE8では、クリックするとバグが発生します
<span class = "button"> <input type = "button" value = "button"> </ span>
、これまでのところ、私は彼を倒していません。
PS私に同情してください、そして、あまり私をscられないでください、これは私の最初の投稿です。
PPSはテーマブログに移動しました