電子書籍の厳選無料作品が豊富！

IE6で見ると文字の下半分が隠れる

解決済

  • 質問者：yuko8320
  • 質問日時：
  • 回答数：1件

お世話になります。
HTMLは素人に毛が生えたレベルの知識しかありませんが、申し込みフォームの表示がおかしいので、直したくチャレンジしたのですが。。。

結局わかりませんでしたので、どなたかヒントだけでもいただけますでしょうか？

現象としてはIE6（おそらく7や8も同様やもしれません。。）で確認したのですが、文字の下1/4ぐらいが消えてしまうのです・・・。

Chromeでは問題なく見れるのですが、IE系ではダメなようです。
以下、実際のHTMLソースとCSSも合わせて添付します。
コピーしてそのまま使える内容になっております。

それでは、ご教授のほど宜しくお願いいたします。



-- ココからHTML ----------------------------------------------------

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

<table class="basic">

<tr>
<td rowspan="3" class="leftcell">連絡先</td>
<td class="rightcell gray">
<dl><dt class="single">電話番号</dt><dd>
<input type="text" name="telephone" size="20"><span class="example">例）09012345678</span>
</dd></dl>
</td>
</tr>

<tr>
<td class="rightcell">
<dl>
<dt class="single">メールアドレス</dt><dd>
<input type="text" name="mail" size="20">
</dd>
<dt></dt><dd><small>※PCでも携帯でもどちらでも可能です</small></dd>
<dt><font color="red"><B>【ご注意】</B></font><BR><small>こちらのアドレスに<font color="red">メールが届かない場合、登録の受付ができません。</font>間違っていないかご確認下さい。</small></dt>
</dl>
</td>
</tr>
<tr></tr>
<tr>
<td class="leftcell">メルマガの配信</td>
<td class="rightcell gray">
希望する <input type="radio" name="magazine" value="1" checked="checked">希望しない <input type="radio" name="magazine" value="2">
</td>
</tr>

<tr>
<td class="leftcell">パスワード設定</td>
<td class="rightcell">
<dl>
<dt class="single">パスワード</dt>
<dd>
<input type="text" name="pass" size="20">4～12文字で任意の文字をご入力ください。
</dd>
</dl>
</td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------------------
-- ココからCSS -----------------------------------------------------
body,
div, dl, dt, dd,
ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea,
p, blockquote, iframe,
table, th, td {
font-size:100%;
font-style:normal;
font-weight:normal;
line-height:1.4;
margin:0;
padding:0;
}

body {
margin:0;
padding:0;
font-size:14px;
font-family:sans-serif;
}

small {
font-size:0.8em;
}

table, td, th {
border: #888 solid 1px;
border-spacing:0;
border-collapse: collapse;
padding:2px 15px;
}
table.basic {
width:750px;
margin-bottom:10px;
background-color:#fff;
}

td.gray {background-color:#f2f2f2;}

td.leftcell{
text-align: center;
width:162px;
background-color:#fff;
line-height:1.2em;
padding:2px 0;
}
td.rightcell{
width:588px;
font-size:0.85em;
padding:3px 15px;
vertical-align:middle;
}
td.rightcell dt {
float:left;
line-height:1em;
vertical-align:middle;
}
td.rightcell dt.single {
margin-top:3px;
}
td.rightcell dt.sin {
margin-top:3px;
color: #708090;
}

td.rightcell dd {
margin-left:120px;
}
td.tdhead{
color:#000;
background-color:#CCE9FF;
padding:2px 10px;
}


input {
margin-right:15px;
}

--------------------------------------------------------------------

「IE6で見ると文字の下半分が隠れる」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

IEではdtをfloatすると下が3pxずれるバグがあるようです。



td.rightcell dt {
float:left;
line-height:1em;
vertical-align:middle;
/padding-bottom:3px;　　// ここを追加 cssハックIE6,7用
}
で、表示上は直ると思います。

先頭に"/"がついているのはわざとです。

*************************************************************
cssハックというのは、ブラウザ毎の解釈の違いを利用して
ブラウザ毎でスタイルを設定する技術です。

スタイルの頭に"/"をつけるとIE6,7は解釈でき、他のブラウザは
解釈できない為、padding-bottom:3px;はIE6,7でのみ有効となります。
**************************************************************
    • good
    • 0
    • 件
通報する
この回答へのお礼

IEのバグなのですね！

色々と試行錯誤して、padding-bottomを入れれば消えないで済むことは
発見したのですが、「cssハック」というものがあるのですね！

勉強になります！
お蔭様で、すんなり解決いたしました。
ありがとうございました！！

通報する
お礼日時：2009/08/28 12:02

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報