IEだと下記は、はみでてしまいます。

FireFox だと折り返してくれます。IEでも折り返してくれるような stylesheet の指定はあるでしょうか?

<button type="submit"
style="font-size:small;border-style:outset;
text-align:center;width:120px;height:60px;
background-color:#ccff00"
>
トップページ トップページ トップページ
</button>

回答の条件
  • 1人2回まで
  • 登録:2006/09/02 16:27:10
  • 終了:2006/09/02 20:47:34

回答(2件)

id:hive7134 No.1

hive7134回答回数167ベストアンサー獲得回数162006/09/02 16:44:30

ポイント50pt

あらかじめ改行を指定してしまうなんてのはどうでしょう?^^;

<button type="submit"
style="font-size:small;border-style:outset;
text-align:center;width:120px;height:60px;
background-color:#ccff00;"
>
トップページ<br>
トップページ<br>
トップページ
</button>




Firefoxと同じような感じに見せかけるなら、以下のコードでできそうです。

<button type="submit"
style="font-size:small;border-style:outset;
text-align:center;width:120px;height:60px;
background-color:#ccff00;display:block;"
>
<div style="vertical-align:center;width:100%;">
トップページ トップページ トップページ
</div>
</button>
id:isogaya

ありがとうございます。後者の方法しかないのでしょうか。。。

2006/09/02 16:58:25
id:ElekiBrain No.2

ElekiBrain回答回数255ベストアンサー獲得回数152006/09/02 17:16:08

ポイント35pt

回り込みそのものはdisplay:blockとしても回避不可能です。おなじみIEの仕様というやつでしょう。IEに不服を言っても始まりませんので、以下の方法で代用してみてください。ulとliをあえてセットで使わないのがポイントです(別に<br />で改行する、divで囲む、等でも構いませんが)。


<style type="text/css">


  #btn01{

   font-size:small;

   border-style:outset;

   text-align:center;

   width:120px;

   height:60px;

   background:#ccff00

  }


  li{

   list-style-type:none;

  }


</style>

=================================


<button type="submit" id="btn01">

 <li>トップページ</li>

 <li>トップページ</li>

 <li>トップページ</li>

</button>

id:isogaya

いろいろがいてくれたのであけました。

2006/09/02 20:47:03
  • id:ElekiBrain
    ElekiBrain 2006/09/02 17:24:16
    時間差で登録したため、hive7134さんの回答が開かれているともしらず、登録してしまいました。内容はhive7134さんの回答とかぶっていますので、オープンしなくても構いません。
    登録する前にリロードしてオープンを確認すべきでした。
  • id:hive7134
    >ElekiBrainさん
    私も良くやってしまいます。重複回答^^;
    回答受付中のコメント許可って便利ですね~。


    >isogayaさん
    すみません、後者の方法ですが、
    色々試行錯誤したときの痕跡が残ってしまっています。

    <button type="submit"
    style="font-size:small;border-style:outset;
    text-align:center;width:120px;height:60px;
    background-color:#ccff00;display:block;"
    >

    の最後の「display:block;」は不要でした。訂正いたします。


    なお、buttonタグとスタイルシートだけでできないか、いろいろと試してはみてるんですが、これといった方法は思いつきませんでした。

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

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

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

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