firefox、IE8で異なるtableの上部空白

このQ&Aのポイント
  • firefoxやIE8で表示すると、表の上部に多くの空白行が表示されます。IE8の仕様なのか、他のブラウザには影響しないようにしたいです。
  • サンプルコードでは<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />を使用しましたが、空白行の問題は解決しませんでした。
  • どのように対応すれば、firefoxや他のブラウザに影響を与えずに空白行の問題を解決できるでしょうか?
回答を見る
  • ベストアンサー

firefox、IE8で異なるtableの上部空白

以下サンプルをfirefox(20.0.1)、IE8で各々表示した場合に IE8では、表の上部に空白行が多くとられてしまいます。 ※複数回改行されているような表示。 以下はサンプルとして簡易にしましたが、 本来作成しているコードでは、対策として <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />は記述してます。 変わりませんでしたが。。 IE8の仕様なのでしょうか? firefox等、他のブラウザに影響が波及しないよう対応したいと考えています、 何かいい方法はありますでしょうか? よろしくお願いします。 <html> <head> <style type="text/css"> @CHARSET "UTF-8"; *{ margin: 0; padding: 0; } table.table{ border-collapse: collapse; } table.table td{ border: 2px #808080 solid; } </style> <head> <body> <div class="main"> <div class="content">   <table class="table">    <tr>    <td>    <select> <option>&nbsp;</option> </select>    </td>    <td>    <select> <option>&nbsp;</option> </select>   </td> <td> <select> <option>&nbsp;</option> </select> </td> </tr> </table> </div> </div> </body> </html>

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

お調べさせて頂いたところ、インデントの先頭が全角スペースになっておりますので、 そこを修正していただければIEで表示されるという余白は消えるはずです。

federan
質問者

お礼

反応が遅くなり、申し訳ないです。 おっしゃる通りでした、助かりました。ありがとうございます。

関連するQ&A

  • FireFoxでborder-collapseを使うと余計な枠線が表示される

    FireFoxでborder-collapse:collapseを指定すると、余分な枠線が表示されてしまいます。 IEでは問題ありません。 <HTML> <HEAD> <title>TEST</title> <style type="text/css"> table { border-collapse: collapse; } td { border: 1px solid black; } td.none{border:none;} </style> </HEAD> <BODY> <table> <tbody> <tr><td rowspan="2">test</td><td class=none>&nbsp;</td><td rowspan="2">text</td><td class=none>&nbsp;</td></tr> <tr><td class=none>text</td><td td class=none>&nbsp;</td></tr> <tr><td rowspan="2">test</td><td class=none>&nbsp;</td><td rowspan="2">text</td><td class=none>&nbsp;</td></tr> <tr><td class=none>text</td><td td class=none>&nbsp;</td></tr> <tr><td class=none>&nbsp;</td><td td class=none>&nbsp;</td><td class=none>&nbsp;</td><td class=none>&nbsp;</td></tr></tbody> </table> </BODY> </HTML> 何か対策は無いでしょうか?

  • tableの外枠をCSSで表示させない方法

    HTMLで作ったテーブルの外枠の縦線をCSSで表示させないようにしたいのですが可能でしょうか? HTMLはさわらずにできる限りCSSでやりたいと思い、いろいろ試してみましたがうまくいきませんでした。 線種はsolidを使いたいです。 よろしくお願いいたします。 <html> <head> <title>css table</title> <style type="text/css"> <!-- table.sample { width:550px; height:auto; border:solid 1px; border-collapse:collapse; border-left:none; border-right:none; } .sample th { width:100px; border:solid 1px; } .sample tr { border:solid 1px; } .sample td { border:solid 1px; } --> </style> </head> <body> <table class="sample" frame="hsides"> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> </table> </body> </html>

    • ベストアンサー
    • CSS
  • テーブルの角を丸くして、立体的に

    先日、IEでも閲覧可能で、 テーブルの線を細くするスタイルシートを このように教えて頂きました。 このスタイルシートから、 テーブルの角を丸くして、 立体的にする書き方を教えて頂けると とっても助かります。 ------------ <!DOCTYPE html> <html lang="ja"> <head> <style type="text/css"><!-- table.WebDesign{ border-collapse: collapse; width: 400px;} table.WebDesign,table.WebDesign td{border:solid 1px #1C79C6;} --></style> </head> <body><div> <table class="WebDesign"> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> </table> </div></body></html>

    • ベストアンサー
    • CSS
  • FireFox2.0でCSSを使ってテーブルそのものをセンタリングしたい

    IE6だと #wrapper { text-align: center; } <div id="wrapper"> <TABLE border="1"> <tr><td>テキスト</td></tr> </table> </div> とやればテーブルそのものがセンタリングされるのですが、 FireFox2.0だと左に寄ったままです。 CSSを使わずに<center>で囲めばセンタリングされますが、 そうではなくてCSSを使ってやるやり方はないでしょうか?

    • ベストアンサー
    • HTML
  • IEとNetscapeの表示の違いについて

    Netscape7.1において、テーブルを表示すると、 セル内の文字上下とborderの間に隙間ができます。 (左側の隙間は問題ありません) その為、IEとNetscapeではテーブル高さが変わってきます。これを同じように表示する事はできるのでしょうか? divで入れ子にしてる事が問題かと、divをはずしてみましたが、同様の現象となります。 ご存知の方、ご教示ください。よろしくお願いします。 <div width:150px;">  <table width="150" border="1">   <tr><td>あいうえお</td></tr>   <tr><td>かきくけこ</td></tr>   <tr><td>さしすせそ</td></tr> </table> </div> css で border-collapse: collapse; border-spacing :0px; を指定してます。

    • ベストアンサー
    • HTML
  • css テーブルについて

    よろしくお願いします。 2だけを300pxと100pxに2分割にできないでしょうか。 <div class="aa"> <table> <tr> <th>1</th> <td>2</td> </tr> <tr> <th>1</th> <td>1</td> </tr> </table> </div> .aa table { width: 500px; height: 100px; border: 1px #000000 solid; border-collapse: collapse; } .aa th { width: 100px; border: 1px #000000 solid; } .aa td { width: 400px; border: 1px #000000 solid; }

    • ベストアンサー
    • CSS
  • テーブル内widthでの改行処理がIEとFirefoxで異なる

    テーブル内のtdに対してwidthを指定していますが、IEとFirefoxで表示が異なります。具体的には下記のコードにて、【文章1】が長い場合、IEではwidth:160pxで自動改行するのですが、Firefoxでは改行されず横に表示されてしまいます。 いちいち改行文字を入れるのはめんどうなのでFirefoxでも自動改行されるようにしたいのですが、何かうまい手をご存知の方、ご教示願います。 <スタイルシート> #contact_table table { width:600px; padding:auto; margin:auto; text-align:center; border-collapse:separate; } #contact_table tr { padding:auto; margin:auto; text-align:center; } #contact_table td { padding:5px; margin:5px; border-top:solid 2px #EEEEEE; border-left:solid 2px #EEEEEE; border-right:solid 2px #C0C0C0; border-bottom:solid 2px #C0C0C0; font-size:12px; font-weight:normal; color:#000000; text-align:left; line-height:1.5em; background:#DAEAF3; } #contact_table td.item { width:160px; white-space:nowrap; background: #000080; text-align:center; border-top:solid 2px #0000CC; border-left:solid 2px #0000CC; border-right:solid 2px #000033; border-bottom:solid 2px #000033; color:#FFFFFF; } <HTML> <div id="contact_table"> <table summary="お問い合わせ"> <tr> <td class="item">【文章1】</td> <td>【文章2】</td> </tr> <tr> <td class="item">【文章1】</td> <td>【文章2】</td> </tr> ・・・ </table> </div>

    • ベストアンサー
    • HTML
  • FIREFOXでのテーブル表示崩れについて

    お世話になります。 レイアウト崩れについて質問させて頂きます。 現在下記のようにしています。 IE9、Safari、Chromeでは問題ないのですが、FireFoxで見た時に添付画像の用になってしまいます。いろいろ試してみたのですが、原因がわかりません。 この現象の原因が思い当たる方いましたらアドバイスをください。 HTML <table class="list"> <thead>  <tr>   <td>テスト</td>  </tr>  <tr>   <th class="tdptn100">Line1</th>   <th class="tdptn100">Line2</th>   <th class="tdptn380">Line3</th> <th class="tdptn100">Line4</th> <th class="tdptn100">Line5</th> <th class="tdptn50">Line6</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> CSS table.list { width: auto; border: 2px solid #000; border-collapse: collapse; margin-left: auto; margin-right: auto; } .list th { font-size: 60%; } .list td { font-size: 60%; display:block; }

    • ベストアンサー
    • HTML
  • IEでテーブル内のテキストが勝手に改行されます。

    個人でサイトを運営しているのですが、 外部CSSをテーブルに適用するとIEとFirefoxで表示が変わってしまい 困っています。問題は下記です。 テーブルに指定するCSSは以下のようなものです。 table.1{ border-top:1px solid #666666 ; border-left:1px solid #666666 ; border-collapse:collapse; border-spacing:0; background-color:#ffffff; empty-cells:show; text-align:left; font-size: 10pt; padding:3px; } .1 th{ border-right:1px solid #666666 ; border-bottom:1px solid #666666 ; color:#330000; background-color:#996633; padding:0.1em 0.1em; text-align:center; } .1 td{ border-right:1px solid #666666 ; border-bottom:1px solid #666666 ; padding:8px 8px 8px 8px; line-height: 120%; } そして本文のHTMLです。 <table width="166" border="0" class="1"> <tr> <td colspan="2"><div align="center">テキストテキスト</div></td> </tr> <tr> <td>イメージ写真</td> <td>イメージ写真</td> </tr> <tr> <td width="76"><p>テキストテキストテキストテキストテキストテキストテキストテキスト</p></td> <td width="79"><p>テキストテキストテキストテキストテキストテキストテキストテキスト</p></td> </tr> </table> 以上のようなものです。 このようにするとFirefoxではきちんと表示されるのですが、 IEだとテキストの部分が4文字ほどで勝手に改行されてしまい、 かなり縦長のテーブルになってしまいます。 試行錯誤してみたのですが、全然できなくて本当に困っています。 もし解決策をご存知の方おられましたら、ぜひ教えていただければ幸いです。

    • ベストアンサー
    • HTML
  • mac&winのsafari4.03にてtableタグのmarginの挙動がおかしい件

    htmlとcssは下記です。 tableタグを括っているdivにmarginが適用されていないにも関わらず、 tableの上下の要素にはmarginが適用されています。 どなたか理由がわかる方はいらっしゃるでしょうか。 よろしくお願いいたします。 firefoxだと思ったとおりに動いてくれるのですが。。 ----------------------------- <style> #wrap { background:#F36;} .inner { background:#6CC;} .foot { background:#36F;} table { border-spacing:0; border-collapse:collapse; margin:10px; } td { border:1px #000 solid;} </style> <div id="wrap"> <div class="foot">あああ</div> <div class="inner"> <table> <tr><td>ほげ</td></tr> </table> <!-- ///.inner --></div> <div class="foot">あああ</div> <!-- ///#wrap --></div> -----------------------------

    • ベストアンサー
    • HTML