ここの私のサイトではCSSボタンを使用していますが、IEで機能しておらず、想定どおりに理由がわかりません。
CSSは次のとおりです。
/* Buttons: Common Style */
.big, .medium, .small{display: block;
text-align: center;
cursor:pointer;
font-family: sansus webissimo;
font-weight:normal !important;
text-shadow: 0 1px 0 rgba(34, 34, 34, 0.8);
color: #ffffff;
border-radius: 15px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(26, 26, 26, 0.8) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
/* Buttons: Sizes */
.big {width: 130px;padding:1px;font-size:25px;}
.medium {width: 80px;padding:3px;font-size:21px;}
.small {width: 68px;padding:3px;font-size:17px;}
.big:active, .medium:active, .small:active{box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.1);outline: 0 none;}
IEでも、タイトルヘッダーとボックスタイトルにcssステッチ効果を使用していますが、境界線の半径が均一でない場合、つまり。'border-radius:6px'の場合、ステッチ効果はIEでのみ機能しません。
CSSは次のとおりです。
/* TITLE BORDERS */
h1, h2, #left-nav .quickjump h2, .right-nav .banners h3, #left-nav .banners h3, h3.twitter, #datepicker .ui-widget-header, #datepicker .ui-datepicker .ui-datepicker-header {margin-bottom:5px;font-family:'league gothic';font-size:26px;text-transform:uppercase;padding:0px 12px;
background: #7B6E80;
-moz-box-shadow: 0 0 0 2px #7B6E80, 1px 1px 3px 2px rgba(85, 85, 85, .5);
-webkit-box-shadow: 0 0 0 2px #7B6E80, 1px 1px 3px 2px rgba(85, 85, 85, .5);
box-shadow: 0 0 0 2px #7B6E80, 1px 1px 3px 2px rgba(85, 85, 85, .5);
color: white;
border: 1px dashed #ddd;
text-shadow: 0 1px 1px #222222;
border-radius: 6px 6px 0 0;
line-height: 1.3;
}
どんな助けでも大歓迎です。