枠線で全体を囲んだとき下の枠線が消えてしまう

質問

kbd要素を枠線で囲って、その部分と「と入力してください。」の文字とバランスよく表示させたいのですが下のように記述したところ、下の枠線が消えてしまいます。
marginやpaddingを調整してもうまくいきません。
どうすればよいでしょうか？
回答よろしくお願いします。

CSSソース
kbd { margin: 0 0.3em;
padding: 0.1em 0.3em;
border: 1px solid black;
}

HTMLソース
<kbd>keybord</kbd>と入力してください。

回答No.2

tenderfeel · ベストアンサー

ＩＥでの表示だと予想しての回答です。

<p><kbd>keybord</kbd>と入力してください。</p>

kbd { margin: 0 0.3em;
padding: 0.1em 0.3em;
border: 1px solid black;
}
p {line-height:1.5;}

親要素にline-heightかを設定すれば解決できると思います。
1行なら上下のpaddingでも良いかと。

お礼

ありがとうございました。

補足

IE7、NS7、Firefox2、Opera9で表示の確認をしたところやはりIE7でのみ、下の線が消えてしまうという現象が起こりました。

p要素で囲んで記述したところ下の線が表示されました。
ありがとうございます。

これはブラウザによって表示される画面が違うんですね。
ところで、質問のときにHTMLソースに、

<kbd>keybord</kbd>と入力してください。

と書いたのですが、実際には、

<div>
<kbd>keybord</kbd>と入力してください。
</div>

と、div要素で囲って区分分けをしているのですがなぜdiv要素では、下の線が消えるのに、p要素を使用すると下の線が現れるのでしょうか？
その違いが分かりません。

すいませんが、もう一度回答よろしくお願いします。

回答No.1

918BG

直接の回答ではありませんが…

ご質問の状況を再現して原因を考えてみようとして、テキストエディタでサンプルタグを打ち、ご質問と同じCSS指定とkbdタグを入れてテストしてみたところ、上下左右とも枠線はちゃんと表示されており何ら問題は見られませんでした。

ちなみに当方の表示環境は、OSがMac OS X (10.4.11)で、ブラウザがMac版Safari (3.0.4)とMac版Firefox (2.0.0.12)です。どちらもちゃんと表示されています。

質問者さんがお使いのブラウザの表示に問題がある場合も考えられますから、何種類か別のブラウザで表示テストをしてみてはいかがでしょうか。もしそれでも下線の表示がおかしいようでしたら、メタタグの内容とかドキュメントタイプの宣言とか、ご質問には書かれていない何か別の要素がからんでいる疑いが濃厚です。そのあたりも見直してみられてはいかがでしょうか。

お礼

ここではHTMLソースを省略して記述しましたが、確認したところ問題はありませんでした。
しかし、おっしゃるとおりほかのブラウザで確認したところIE7のみ下の線が消えてしまう現象がありました。
ブラウザの表示に問題があったんですね。

ありがとうございました。