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

回答の条件
  • 1人2回まで
  • 登録:2008/06/18 15:29:09
  • 終了:2008/06/19 10:42:09

ベストアンサー

id:pahoo No.1

pahoo回答回数5960ベストアンサー獲得回数6332008/06/18 16:09:27

id:sutara_lumpur

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

}

2008/06/19 10:40:38
  • id:sutara_lumpur
    あれ?pahooさんへのレスの中のHTML文がおかしいですね…
    本当は
    &lt;button$gt;&lt;span$gt;テストボタン&lt;/span$gt;&lt;/button$gt;
    とするつもりだったんですが…。
    タグは認識されちゃうんですね。
  • id:sutara_lumpur
    …って、コメントのほうは認識されないのか…。
    <button><span>テストボタン</span></button>
    です。
  • id:sutara_lumpur
    テーブルで囲んでいても、
    text-aligin:right;
    を指定していると、ボタンの陰に続きの文章が
    隠れてしまうようですね。

    margin-left:auto;
    で対処するしかないようです。
  • id:sutara_lumpur
    まだ十分に検証していませんが…、

    上のソースで、
    buttonタグのonclick属性で
    prototype.jsの『new Ajax.Updater』を使って
    フォーム送信しようとしても、
    うまく働いてくれません。
    他の関数ならば問題はないのですが…。
  • id:sutara_lumpur
    失礼しました。
    上の不具合は、僕がbuttonタグに
    type="button"をつけていなかったことが原因でした。

この質問への反応(ブックマークコメント)

トラックバック

  • CSS フレキシブルなボタンを作る はてなで質問して得られた答えをそのまま備忘録として 記しておきます。 ■質問URL http://q.hatena.ne.jp/1213770547 Firefox3の場合 IE7の場合 ■HTML &lt;button&gt;&lt;span
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません