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

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>

●質問者: isogaya
●カテゴリ:インターネット ウェブ制作
✍キーワード:background-color border firefox IE トップページ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● hive7134
●50ポイント

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

<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>
◎質問者からの返答

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


2 ● ElekiBrain
●35ポイント

回り込みそのものは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>

◎質問者からの返答

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

関連質問


●質問をもっと探す●



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