• 締切済み

ボックス間の隙間をなくしたい。

親ボックス[wrap]に配置された、子ボックス[exam1],[exam2],[exam3] の<span></span>に囲まれた”文字を”消すための記述、（子ボックスには本来画像が配置 され、文字はaltの役割として記述してあります。） #wrap a span { display:none; } をしますと、「IE」において、数ピクセルの隙間が出来てしまいます。 [Firefox]ではその様な事はありません。 隙間をなくしたいのですが、どなたか、CSSなどに詳しい方、アドバイスをいただけますでしょうか。 ※尚、文字を”消す”方法として「text-indent」などは使用しないとします。 よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN''http://www.w3.org/TR/html4/strict.dtd'> <head> <title>隙間をなくしたい</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> ul{ margin: 0; padding: 0; } a { text-decoration: none; } li { list-style: none; } body { margin: 0px 0px 0px 20px; } #wrap{ width:300px; height:400px; margin-top:20px; padding-left:20px; border: 1px #1071F5 solid; } .exam1 a,.exam2 a,.exam3 a{ display:block; height:50px; width:200px; margin-top:0px; border: 1px #FD0101 solid; } /* この下記の行を有効にすると隙間が開く */ #wrap a span { display:none; } </style> </head> <body> <!-- ■レフトナビ■ --> <div id="wrap"> <ul> <li class="exam1"><a href="exam.html"><span>exam1</span></a></li> <li class="exam2"><a href="exam.html"><span>exam2</span></a></li> <li class="exam3"><a href="exam.html"><span>exam3</span></a></li> </ul> </div> </body> </html>

みんなの回答

回答No.1

IEとFireFoxやChoromeで見た目を統一したければ、「全称セレクタ」とか「リセットCSS」と言う手法があります。 カッコ内で検索してください。 なお、コードが長くなるなどの弊害もありますので、使わないことを勧める方もおられます。 ご自身で判断してください。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. Windows
  4. Windows Vista

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

質問する