アプリ版:「スタンプのみでお礼する」機能のリリースについて

body、tdのフォントサイズの依存について教えて頂きたい事があります。

<style>
body{font-size:85%;}
td{font-size:85%;}
</style>

とした時、

<body>
フォントサイズ(bodyに直接)<br />
<table>
<tr>
<td>フォントサイズ(テーブル1つ)</td>
</tr>
</table>

<table>
<tr>
<td>
<table>
<tr>
<td>フォントサイズ(テーブル2重ネスト)</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

bodyのフォントサイズ > テーブル1つのフォントサイズ > テーブル2つのフォントサイズ

とネストをする毎にフォントが小さくなります。

この現象を回避する事は出来ますでしょうか。

上記を全て同じフォントサイズにしたい次第です。

ご存知の方がいましたらアドバイス頂けませんでしょうか。
よろしくお願いします。

確認環境は

Win IE6
mac Safari3 Firefox2

で上記の動作になります。
Winのfirefoxでは、テーブルをネストしてもフォントのサイズは一緒でした。(body > table1つ = table2つ)

A 回答 (2件)

%での指定は相対指定なので、子要素に継承されます。


firefoxはtdを入れ子にした場合継承されないので、1重と2重のフォントサイズが同じになります。
(なぜそうなるかは詳しい人が解説してくれるでしょう!)

tdをfont-size:100% にすればbodyと同じになります。

なおtableの入れ子はxhtmlでは間違った記述なのでご注意を。

参考URL:http://diary.noasobi.net/flyson/xhtml_ref/table. …

この回答への補足

テストした所、DOCTYPEによってbodyとtdのフォントの依存関係が分かりました。

DOCTYPEが指定していない場合、とTransitionalだけど、URLの指定がない場合は、bodyとtdのフォントのサイズは依存しませんでした。

Transitional+URLとstrictの場合は、bodyとtdのフォントサイズは依存し、さらに、tableのネスト時にtdのサイズは上のtdに依存しました。

補足日時:2008/02/25 21:06
    • good
    • 0
この回答へのお礼

ありがとうございます。tdのフォントサイズは操作せず、bodyのみの操作で同じ大きさに成る事が確認出来ました。どうもありがとうございます。

お礼日時:2008/02/25 20:12

上記ソースを試しましたが、winXP IE6,Firefox ともに、文字サイズは同じでした。



body{font-size:85%;}
table{font-size:85%;}
もしくは
body,table,td{font-size:85%;}
とか、tableセレクタにもやっていませんか?

この回答への補足

ありがとうございます。
スタイルの指定は記述したものだけです。

ソースを全部コピーしますと、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>無題ドキュメント</title>
<style>
body table td { margin:0px; padding:0px}
body
{
font-size:85%;
}

td
{
font-size:85%;
}
</style>
</head>

<body>
フォントサイズ(bodyに直接)<br />

<table>
<tr>
<td>フォントサイズ(テーブル1つ)</td>
</tr>
</table>

<table>
<tr>
<td>
<table>
<tr>
<td>フォントサイズ(テーブルネスト)</td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>

です。

DOCTYPEとか関係あるのでしょうか。。。

補足日時:2008/02/25 16:03
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!