人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

buttonタグへのスタイル指定についての質問です。

画像を使わず、なるべくシンプルなCSSで、
IEでもFirefoxでも同じ見映えの
コンパクトなボタンを作りたいと考えています。
しかし、以下の方法で試してみたものの、
どれも満足のいく結果にはなりませんでした。

複雑なテクニックをなるべく使わず、シンプルな
方法でボタンをデザインする方法を教えてください。

---★1-------------------------------------------
オーソドックスなスタイル指定では、IEとFirefoxとでは
表示が大きく違ってしまいます。
【説明】
http://s1.muryo-de.etowns.net/~sutara/#ex1

---★2-------------------------------------------
アスタリスクによるCSSハックでは、コンパクトな
ボタンを作ることができません。
【説明】
http://s1.muryo-de.etowns.net/~sutara/#ex2

---★3-------------------------------------------
ボタンごとにwidthを設定するのは面倒なので、
なるべくなら避けたいです。
【説明】
http://s1.muryo-de.etowns.net/~sutara/#ex3

---★4-------------------------------------------
PHPで、ボタン内の文字数に応じてwidthを設定するのは
ちょっと複雑で、他の人がわかりづらいのでは
ないかと思います。
【説明】
http://s1.muryo-de.etowns.net/~sutara/#ex3

●質問者: 宮崎雄策
●カテゴリ:ウェブ制作
✍キーワード:CSS firefox IE PHP アスタリスク
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● pahoo
●80ポイント ベストアンサー

以下の記事が参考になると思います。

◎質問者からの返答

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にのみ適用*/

}

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ