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

以下のhtmlを表示するとき、firefox, chrome, safariでは「お問い合わせ」にpaddingがちゃんと効くのですが、IEだと効いてくれません。
端っこによって表示されてしまいます。

<div id="header">
<div id="headNavi" class="clearfix">
<h1><a href="http://xxx.com"><img style="float: left;" alt="aaa" src="http://xxx.com/xxx.gif" width="135" height="39" class="over" /></a></h1>
<p style="bottom: 5px; float: right; padding: 1.5%; width: 100px; "><a href="http://xxx.com/help.html" target="_blank" >お問い合わせ</a></p>
</div>
</div>

IEでも同じようにpaddingを効かすにはどう変更したらよいでしょうか?

1306851913
●拡大する

●質問者: yuma_nishizaki
●カテゴリ:ウェブ制作
✍キーワード:chrome firefox HTML IE padding
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● deflation
●100ポイント

IEのバージョンは幾つですか?

手元のIE8/IE9ではpaddingは効いています。


2 ● Lhankor_Mhy
●100ポイント

これは知らなかったですね。おそらくIEのバグだと思います。

ただ、id:deflationさんは有効に再現しているとおっしゃってますので、ひょっとすると何らかの環境の問題かもしれません。

次のソースをご覧下さい。

<style>
div{
background-color:#ccc;
width:1000px;
}
#width{
background-color:#c55;
width:200px;
padding:10%;
}
#no-width{
background-color:#5c5;
padding:10%;
}
</style>
<div>
<p id="width">width</p>
<p id="no-width">no-width</p>
</div>

これをfirefox4で表示すると以下のようになります。

f:id:Lhankor_Mhy:20110601102841p:image:medium

一方IE8ですとこうなります。

f:id:Lhankor_Mhy:20110601103537j:image:medium

解決法としては、「paddingでパーセント指定をしない」ということになるかと思います。

関連質問


●質問をもっと探す●



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