• 解決済 akito2362

    (@akito2362)


    wordpressの3.0とtwentytenの1.1を使ってHPを作っているのですが、
    テーブルに画像を挿入すると、Firefoxで閲覧した時にだけ
    決まって、下に2pxか3pxくらいの空白が出来てしまいます。
    IEで見ると、正常に表示されるのですが。。。

    http://tabletest2.sakura.ne.jp/?page_id=2
    上がテーブルに実際に画像を挿入したもので、
    下がメモ帳にwordpressで使っているのと同じコードを入れて
    htmlドキュメント(firefoxの)で開いたのを写真に撮ったものです。
    本来なら下の写真のように表示されるはずなのですが。。

    試しにスタイルシートを上の11行を除いて全て消してみましたが、
    テーブル内の下に余分な空白が出来るのは同じでした。
    スタイルシートを消しても解決しないとなると、原因はどこにあるのでしょう?
    paddingとmargin系もぜんぶ消してみましたが、同じでした。。。

    写真だけなら兎も角、タイトルバーなどもテーブルの中に入れて使うと
    同じような状態に。。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • ソースを拝見しましたが、ヘッダ部分などあきらかにおかしいです。
    ヘッダ部分を正しく書き直してみると、問題の隙間はなくなりました。

    <!DOCTYPE html>
    <html dir="ltr" lang="ja">
    <head>
    <meta charset="UTF-8" />

    テーマか何かのファイルを編集しましたか?

    こんにちは

    style.cssのほうは検証していないのですが、

    img{margin-bottom:-6px!important;}

    で、除去できませんか?

    トピック投稿者 akito2362

    (@akito2362)

    こんばんわ。

    >joyaceさん
    ありがとうございます。
    テーマはかなり無理矢理に弄っちゃってます・・・orz
    デフォルトの状態だともっとレイアウトが崩れるので、
    スタイルシートのレイアウトの部分で消してしまっている部分が多いです。

    header.phpの先頭部分を教えて下さったコードと入れ替えてみましたが、
    自分のやり方が悪いのか変わらないです。
    多分、単に自分の入れ方が激しく間違っているのだと思われます・・・orz

    >nobitaさん
    ありがとうございます。
    おお、凄いです!!Firefoxの表示が一発で治りました。
    実際に自分のHPに使わせていただくと、他の画像の配置が動いてしまったので、

    .test1
    img {
    margin-bottom:-6px!important;
    /* IE 6 */
          margin-bottom:0px;
    }

    でページ内にdiv classを入れて使わせて頂こうと思います。
    またレイアウトで困った際には!importantを思いだそうと思います。
    本当に感謝です!

3件の返信を表示中 - 1 - 3件目 (全3件中)

トピック「テーブルに画像を挿入すると、どうやっても下に2pxか3pxの空白が出来てし」には新たに返信することはできません。