次のように見えるはずだとしましょう：
ボタンは：
- インラインブロックになる
- （可能な範囲で）親の様式を継承できる
- 親のいくつかのプロパティとメソッドを継承します。
最初の段階では、2つのコンテナで同様のボタンを作成することでコードを可能な限り最小化しようとしました。コンテナの1つはオフセット付きで埋め込まれ、曲線のある美しい背景を表示しますが、これはプロセスがボタン自体のプロパティとメソッドを継承するのに十分ではないつまり、要素としてのボタン自体はコンテナ内に存在する必要があります（<span> <div> <button /> </ div> </ span>）。
実験を簡素化するために、jQueryを使用します。
しばらくして、IE、FF、Operaがすべてのコンテナのサイズと外観を通常のCSSと組み合わせてボタンで制御することは非常に難しいことがわかりました。 結果は、スタイルをめぐるハッキング闘争に変わった。 すぐに、FF2とFF3に異なるスタイルを書く必要性に初めて直面しました。
最後に、ExtJSで使用される概念、つまりテーブルが基礎として採用されました。
[左端|ボタン|右端]
この点で、ポジショニングに関する質問の数は大幅に減少し、それに伴いCSSの量も減少しました。
チートコード
ソースボタンが次のように設定されていると仮定します
<入力タイプ= 'submit'値= 'Submit' class = 'replaceMe w100'>
<input type = 'button' value = 'Pushme' class = 'replaceMe ico ico-image' disabled = 'disabled'>
この場合、 replaceMeクラスが置換のセレクターになり、 w100クラスが補助クラス（たとえば、ボタンの幅を担当する）になり、継承する必要があります。 icoおよびico-imageは、アイコンを担当するクラスです。
プロトタイプのスプライト画像：
CSSプロトタイプ：
.ico {
padding-left: 20px !important;
padding-bottom: 1px !important;
background-position: 0px 0px;
background-repeat: no-repeat;
}
.ico-image { background-image: url( "page_tick.gif" ) !important;}
/* */
.xBtn tr td {
border: 0 none !important;
border-bottom: 0 none !important;
padding: 0;
font:normal 11px sans-serif, tahoma, verdana, helvetica ;
height: 21px;
min-height: 21px;
}
/* */
.xBtn {
cursor:pointer;
border-collapse: collapse;
white-space: nowrap;
display: inline;
width: auto;
}
/* . , .
* , IE : ,
* padding: 0 1.3em;
* */
.xBtn button {
border:0 none;
background:transparent no-repeat;
font:normal 11px tahoma,verdana,helvetica;
padding-left:3px;
padding-right:3px;
height: 21px;
cursor:pointer;
margin:0;
overflow:visible;
width:auto;
-moz-outline:0 none;
outline:0 none;
}
/* IE */
* html .xBtn button {width: 1px;}
*+html .xBtn button {width: 1px;}
*+html .xBtn button {padding-top:3px;}
/* */
.xBtn .xBtn-text-ico {
background-position: 0 0px;
background-repeat: no-repeat;
height: 16px;
padding: 0 0 2px 18px;
margin-top: 1px;
}
/* */
.xBtn .xBtn-text {
background-position: 0 0px;
background-repeat: no-repeat;
padding-top:0px;
padding-bottom:2px;
padding-right:0;
margin-top: 1px;
height: 16px;
}
/* IE */
*+html .xBtn .xBtn-text { padding-top:1px; margin-top: 2px;}
.xBtn-Left, .xBtn-Right {
font-size:1px;
line-height:1px;
width:3px;
height:21px;
}
.xBtn-Left { background: url(btn-sprite.png) no-repeat 0 0;}
.xBtn-Right { background: url(btn-sprite.png) no-repeat 0 -21px;}
.xBtn .xBtn-Left i, .xBtn .xBtn-Right i {
display:block;
width:3px;
overflow:hidden;
font-size:1px;
line-height:1px;
}
.xBtn .xBtn-Center {
background:url(btn-sprite.png) repeat-x 0 -42px;
vertical-align: middle;
text-align:center;
cursor:pointer;
white-space:nowrap;
}
.xBtn-over .xBtn-Left{ background: url(btn-sprite.png) repeat-x 0 -63px !important; }
.xBtn-over .xBtn-Right{ background: url(btn-sprite.png) repeat-x 0 -84px !important; }
.xBtn-over .xBtn-Center { background: url(btn-sprite.png) repeat-x 0 -105px !important;}
.xBtn-click .xBtn-Left { background: url(btn-sprite.png) repeat-x 0 -126px !important;}
.xBtn-click .xBtn-Right { background: url(btn-sprite.png) repeat-x 0 -147px !important; }
.xBtn-click .xBtn-Center { background: url(btn-sprite.png) repeat-x 0 -168px !important; }
.xBtn em {
font-style:normal;
font-weight:normal;
height: 16px;
}
* This source code was highlighted with Source Code Highlighter .
そして実際には、コード自体：
$( '.replaceMe' ).each( function (){
//
$( this ).removeClass( 'replaceMe' );
//
var BtnTable = document .createElement( 'table' );
var BtnTableRow = BtnTable.insertRow(0);
var LeftBtnCell = BtnTableRow.insertCell(0);
var CenterBtnCell = BtnTableRow.insertCell(1);
var RightBtnCell = BtnTableRow.insertCell(2);
// ,
// - DOM
var newBtnContainer = document .createElement( 'em' );
var newBtnSideLContainer = document .createElement( 'i' );
var newBtnSideRContainer = document .createElement( 'i' );
// ,
$(LeftBtnCell).addClass( 'xBtn-Left' ).append(newBtnSideLContainer);
$(RightBtnCell).addClass( 'xBtn-Right' ).append(newBtnSideRContainer);
// ,
//
newBtnContainer.setAttribute( 'uselectable' , 'on' );
$(BtnTable)
// -
.addClass( 'xBtn' )
// Title,
.attr( 'title' , $( this ).attr( 'value' ) || '' )
// -
.hover(
function (){
if ($( 'button:enabled' , $(BtnTable)).length) $( this ).addClass( 'xBtn-over' );
},
function (){
$( this ).removeClass( 'xBtn-over' );
$( this ).removeClass( 'xBtn-click' );
}
)
.mousedown( function (){
//$(newBtn).focus();
$( this ).addClass( 'xBtn-click' );
})
.mouseup( function (){
$( this ).removeClass( 'xBtn-click' );
});
// ,
// , - .
// ico ico-image
// , , ...
var xBtnClasses = this .className.split( ' ' );
var hasIco = $( this ).hasClass( 'ico' );
var icoClassName = '' ;
for ( var i = 0; i < xBtnClasses.length; i++ ) {
if (xBtnClasses[i].toString().match(/ico-\w+/)) icoClassName = xBtnClasses[i].toString();
}
// .
if (hasIco && icoClassName) {
$( this ).removeClass( 'ico' ).removeClass(icoClassName)
}
// ( )
//
$(CenterBtnCell).append(newBtnContainer).addClass( this .className).addClass( 'xBtn-Center' );;
// onclick
var onClickEv = $( this ).attr( 'onclick' );
// , -
if (jQuery.isFunction(onClickEv)) {
$(BtnTable).bind( 'click' , function (e){
onClickEv();
});
// , submit-?
//
} else if ( this .type == 'submit' ) {
$(BtnTable).bind( 'click' , function (e){
if ($( this ).find( 'button' ).length) {
var f = $( this ).find( 'button' )[0];
f.click();
}
});
}
//
$( this ).hide().before(BtnTable);
// JavaScript.
// IE, type
// :
var Btn = '<button ' +
//
'type="' + ($( this ).attr( 'type' ) || 'button' ) + '" ' +
// ID
'id="' + this .id + '" ' +
// : , ,
'class="' + ((hasIco && icoClassName) ? 'xBtn-text-ico ico ' + icoClassName : 'xBtn-text' ) + (($( this ).attr( 'disabled' )) ? ' disabled"' : '' ) + '" ' +
//
(($( this ).attr( 'disabled' )) ? 'disabled="disabled"' : '' ) +
'name="' + $( this ).attr( 'name' ) + '" ' +
'title="' + $( this ).attr( 'title' ) + '" ' +
'style="' + (($( this ).attr( 'value' ) == '' ) ? 'width:16px;' : '' ) + '" ' +
'>' + $( this ).attr( 'value' ) +
'</button>' ;
// Tadaaaa!
newBtnContainer.innerHTML = Btn;
// IE, , ,
if ($.browser.msie && $( this ).attr( 'value' ) != '' ) {
if ($(CenterBtnCell).width()) {
$(CenterBtnCell).find( 'button' ).css( 'width' , $(CenterBtnCell).width() + 'px' );
} else {
$(CenterBtnCell).find( 'button' ).css( 'width' , TextMetrixWidth( this ) + 18 + 'px' );
}
}
$( this ).remove();
});
* This source code was highlighted with Source Code Highlighter .
ご清聴ありがとうございました。 仕事の過程で得た知識が役に立つことを願っています。
更新：労働者の要求に応じた作業のデモンストレーション 。