画像を使わず、なるべくシンプルなCSSで、
IEでもFirefoxでも同じ見映えの
コンパクトなボタンを作りたいと考えています。
しかし、以下の方法で試してみたものの、
どれも満足のいく結果にはなりませんでした。
複雑なテクニックをなるべく使わず、シンプルな
方法でボタンをデザインする方法を教えてください。
---★１-------------------------------------------
オーソドックスなスタイル指定では、IEとFirefoxとでは
表示が大きく違ってしまいます。
【説明】
http://s1.muryo-de.etowns.net/~sutara/#ex1
---★２-------------------------------------------
アスタリスクによるCSSハックでは、コンパクトな
ボタンを作ることができません。
【説明】
http://s1.muryo-de.etowns.net/~sutara/#ex2
---★３-------------------------------------------
ボタンごとにwidthを設定するのは面倒なので、
なるべくなら避けたいです。
【説明】
http://s1.muryo-de.etowns.net/~sutara/#ex3
---★４-------------------------------------------
PHPで、ボタン内の文字数に応じてwidthを設定するのは
ちょっと複雑で、他の人がわかりづらいのでは
ないかと思います。
【説明】
http://s1.muryo-de.etowns.net/~sutara/#ex3
sutara_lumpur
2008/06/19 10:45:56
4
4
5960
633
2
2
1
1番目のリンク先で紹介されていたサイトが
とても参考になりました。
僕の場合は、以下のような記述で解決しました。
IEでは、ボタンタグの後に文章を続けるとボタンの下に
隠れてしまうので、実際にはテーブルレイアウトの中に
組み込まなくちゃいけませんが。
それにしても…、IEにのみfolat:left;を適用するなんて
どうやって考えついたんでしょうね…。
本当にありがとうございました。
■HTML
<button>テストボタン</button>
■CSS
button{
background:transparent;
border:0pt none;
cursor:pointer;
margin:0pt;
padding:0pt;
text-align:center;
*width:1%; /*IEにのみ適用*/
}
button span{
cursor:pointer;
font-family:sans-serif;
font-size:12px;
line-height:23px;
border:1px solid #000;
background:#fbb;
padding:0px 8px;
display:block;
position:relative;
white-space:nowrap;
*float:left; /*IEにのみ適用*/
}