彼がそのようなボタンを見たとき、タイプセッターは通常何をしますか？ 正確に、単純に、そのまま切り取り、写真としてレイアウトに挿入します。
例：
< 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 .
すべてが単純に思えますが、レイアウト設計者は各フォームまたはリンクの新しい画像を切り取らなければならず、それによって大量の画像が生成され、貴重な時間を無駄にします。
この問題に対して次のアプローチを提案します（誰かがすでにこの方法を考え出したかもしれませんが、私はまだそれを見ていないと言ってすぐにそれを取り去ります）。
このために必要なもの：
- csshover2.htcおよび条件付きコメント ：IE6に次のようなCSS構造を理解するように指示します：div.button：hover
- CSSスプライトの 2つの画像（ 1、2 ）
- HTML + CSS
- 数分
実際の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はテーマブログに移動しました