Win IE5.5～6.0での余白に関するバグ

前へ 次へ
このQ&Aのポイント
  • 最近やっと完全スタイルシートによりコーディングをマスターする為に勉強を始め何とかある程度形になるまでコーディングが出来たのですがWin IE5.5と6.0でバグが発生してしまいました。
  • 幅532pxのボックス内に532pxの画像を配置した所右側に1px～2pxの無駄な余白が出来てしまうのです。他のモダンブラウザーでは全て平気なのですがIE5.5と6.0でこの現象が発生してしまいます。
  • 画像を添付しましたので症状を見てください。また、下記アドレスに現在製作中のHTMLファイルとCSSファイルをアップしてありますのでお暇な時にでも覗いていただきアドバイスいただきたくおもいます。
回答を見る
  • ベストアンサー

Win IE5.5～6.0での余白に関するバグ

最近やっと完全スタイルシートによりコーディングをマスターする為に勉強を始め何とかある程度形になるまでコーディングが出来たのですが Win IE5.5と6.0でバグが発生してしまいました。 幅532pxのボックス内に532pxの画像を配置した所右側に1px～2pxの無駄な余白が出来てしまうのです 他のモダンブラウザーでは全て平気なのですがIE5.5と6.0でこの現象が発生してしまいます。画像を添付しましたので症状を見てください。 それと下記アドレスに現在製作中のHTMLファイルとCSSファイルをアップしてありますのでお暇な時にでも覗いていただきアドバイスいただきたくおもいます。 宜しくお願いします ■HTML http://sangoclip.web.fc2.com/test/ ■CSS(レイアウト用) http://sangoclip.web.fc2.com/test/shared/css/default.css ■CSS(デフォルトCSSクリアー用) http://sangoclip.web.fc2.com/test/shared/css/reset.css

画像を拡大する
  • CSS
  • 回答数1
  • ありがとう数1

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

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

border周りかボックス解釈のバグのような気がしますが、よくわかりませんね・・・ img{display:block;}とか、*{zoom:1;}とかでは直りませんか？ その他気になる点としては #right-containerにwidth:532px;が指定されているにもかかわらず、その中の要素に何度もwidth:532px;を指定されている点です。 何も指定しなくても親要素の幅100%まで伸びるので普段は必要ないのではないでしょうか。 このあたりはもしかしたらボックス解釈バグの原因になることがあるかもしれません。

mugen_1001
質問者

お礼

早々のご回答ありがとうございます アドバイスいただきました。 下記の修正を致しましたら解決致しました。 やはりなるべく無駄な記述はしないようにしないと今回のようなバグの 原因になってしまうんですね。 今回はとても良い勉強をさせていただきました。 ありがとうございます。 > #right-containerにwidth:532px;が指定されているにもかかわら > ず、その中の要素に何度もwidth:532px;を指定されている点です。 > 何も指定しなくても親要素の幅100%まで伸びるので普段は > 必要ないのではないでしょうか。 > このあたりはもしかしたらボックス解釈バグの原因になることが > あるかもしれません。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • スタイルシート IE環境でのバグ

    下記アドレスが現在テスト中のサイトのアドレスです。 グローバルメニューボタン下部(添付画像の赤枠の部分)に2～3px程の白い隙間がどうしてもできてしまいます。 色々CSSの設定を試してみたのですがどうしてもWIN XP IE6の環境だけ回避できないのです その他の一般的なモダンブラウザでは大丈夫なのですが・・・ どなたか原因を教えていただけると助かります。 宜しくお願いします。 ■HTML http://sangoclip.web.fc2.com/lesson01/ ■デフォルトCSS http://sangoclip.web.fc2.com/lesson01/shared/css/default.css ■リセットCSS http://sangoclip.web.fc2.com/lesson01/shared/css/reset.css

    • ベストアンサー
    • CSS
  • スタイルシートのバグです(3)

    下記アドレスが現在テスト中のサイトのアドレスです。 添付画像の赤枠の部分が ブラウザーの文字サイズを大きくしていき 横幅がいっぱいになるとなぜかカラム落ちしてしまいます。 親ボックスには横幅のサイズを指定しているものの 子要素には特に幅のサイズ指定などはしていないにもかかわらず なぜかカラム落ちしてしまいます。 仮に子要素の幅のサイズ指定をしてみたのですがそれでも同じでした 原因がよくわかりません？？ ちなみに一般的なブラウザー全てで同じ現象でした。 どなたかご教授いただけると助かります。 宜しくお願いします。 ■HTML http://sangoclip.web.fc2.com/lesson03/jyuken/ ■デフォルトCSS http://sangoclip.web.fc2.com/lesson03/shared/css/default.css ■リセットCSS http://sangoclip.web.fc2.com/lesson03/shared/css/reset.css

    • ベストアンサー
    • CSS
  • スタイルシートのバグです(2)

    下記アドレスが現在テスト中のサイトのアドレスです。 バグの内容は添付画像の赤枠の部分なんですが CSSの指定は見出しタグh3の下部にボーダーを設定してその中にテキスト要素を入れてフロートさせて右へ左へ配置しているのですが なぜか見出しタグh3で設定したボーダーの部分にテキストが乗ってきてしまって打ち消し線みたいになってしまうのです。 ソースも無駄な部分は消して今の状態までスマートにして色々試行錯誤してみたのですがどうにも解決できません。 ちなみに一般的なブラウザー全てで同じ現象になるのでそもそも文法が間違っているのですかね？？ どなたかご教授いただけると助かります。 宜しくお願いします。 ■HTML http://sangoclip.web.fc2.com/lesson03/jyuken/ ■デフォルトCSS http://sangoclip.web.fc2.com/lesson03/shared/css/default.css ■リセットCSS http://sangoclip.web.fc2.com/lesson03/shared/css/reset.css

    • ベストアンサー
    • CSS
  • スタイルシートのline-hightについて教えてください

    下記アドレスが現在テスト中のサイトのアドレスです ■HTML http://sangoclip.web.fc2.com/test/ ■デフォルトCSS http://sangoclip.web.fc2.com/test/shared/css/default.css ■リセットCSS http://sangoclip.web.fc2.com/test/shared/css/reset.css ■Yahoo! UI LibraryのFonts CSS http://sangoclip.web.fc2.com/test/shared/css/fonts.css フォントサイズは全て同じです(12px相当) ラインハイトは左から1.1 真ん中1.5 右1.8と 設定しているのですが ラインハイトの設定の違いによりそれぞれの最初の行上部と最後の行の下部の余白が違ってしまいます。 ラインハイトを大きく設定すればするほど上下に無駄な余白がとられてしまうのですが厳密に1px単位で余白を設定する際にとても困ってしまいます。 上下に余白を作りたくない時でもラインハイトの影響を受けて余白が出来てしまうのですこれはCSSの仕様上しょうがないのでしょうか？？ それとも何か解決方法はあるのでしょうか？ どなたかアドバイスいただけると助かります。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • CSSレイアウトによる環境別不具合

    最近やっと完全スタイルシートによるコーディングの勉強を初めました そこで早速環境別のバグの壁にぶち当たってしまいました＞＜ 内容は「flortさせた子要素の親ボックスの背景色(背景画像)が表示されない事です。」 過去ログを色々探ってみたのですが色々な方法があり「CSS clearfixハッ ク」を使用した例や<div style="clear:both;"></div>を使用した例があり試してみたのですがどれも納得のいく解決方法ではありませんでした。 私的な希望としては -------------------------------------------------- Win→IE/Fire Fox/NN/Opera/Safari/バージョンは 最新のものから1つ前位まで問題なく表示 Mac→IE/Fire Fox/Safari/バージョンは最新のものから 1つ前位まで問題なく表示 ドリームウィーバー上でのプレビューでもレイアウト崩れしない ジャバスクリプトやCSSハックを使ってのCSSの振り分けは極力避けたい -------------------------------------------------- 以上の条件をクリアーできるような解決方法を探しています。 どなたかアドバイスをいただけると助かります。 下記アドレスに現在製作中のHTMLファイルとCSSファイルをアップしてありますのでお暇な時にでも覗いていただきアドバイスいただきたくおもいます。 余談ですがこの手のバグで一般的に一番ベストな解決方法はどんな方法なのでしょうか？？ ■HTML http://sangoclip.web.fc2.com/test/ ■CSS(レイアウト用) http://sangoclip.web.fc2.com/test/shared/css/default.css ■CSS(デフォルトCSSクリアー用) http://sangoclip.web.fc2.com/test/shared/css/reset.css

    • ベストアンサー
    • CSS
  • Yahoo! UI LibraryのFonts CSSについて

    YAHOOが提供している Yahoo! UI LibraryのFonts CSSを利用して各ブラウザー毎のフォントサイズを統一しようとしているのですが 下記参考サイトで紹介している通りに設定をして使用したのですがどうもうまく適用されません。 ■参考サイト→http://thinkit.jp/article/813/1/ ちなみにYahoo! UIのFonts CSSはローカルにデータを持たずにヤフーサーバーから直接リンクして使用しています。 そもそも使用の仕方が間違っているのでしょうか？？ 問題がどこにあるのかアドバイスいただけると助かります。 下記に現在テスト製作中のサイトのアドレスを記載しておきますので中身を見ていただきアドバイスいただけると助かります。 ■HTML http://sangoclip.web.fc2.com/test/ ■デフォルトCSS http://sangoclip.web.fc2.com/test/shared/css/default.css ■リセットCSS http://sangoclip.web.fc2.com/test/shared/css/reset.css ■Yahoo! UI LibraryのFonts CSS http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css

    • 締切済み
    • CSS
  • IE7でclearfixが効かない？

    winXP環境、xhtml+cssでwebページを作成していますが、壁にぶち当たっています。 親ボックスの中に２つの子ボックスをfloatでレイアウト、というよくあるパターンですが、親ボックスにclearfixを指定しているのにIE7で表示すると、floatさせたdivが親ボックスからはみ出した状態で表示されます。 Firefox3/IE6/IE8で表示確認すると問題なく表示されます。 ■htmlソース http://bangn.web.fc2.com/testpage.html ■CSSソース http://bangn.web.fc2.com/css/default.css（デフォルトスタイルリセット用） http://bangn.web.fc2.com/css/base.css（divレイアウト、clearfix） http://bangn.web.fc2.com/css/kakunin.css（レイアウト確認用に各divのborderを黒くしたもの） htmlの書き方がおかしいのか？clearfixの記述がおかしいのか？とソースを何度も見直ししましたが、解決に至らず困っております。 どなたかアドバイスをいただけないでしょうか？ よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • ブラウザ毎の対処 Win ie5-5.5

    xml宣言なしのXHTML 1.0 Transitionalでコーディングをしています。 下記の記述で Win ie5-5.5のみ専用のCSSを読み込むようにしているのですが なぜか通常で適用するCSSが読み込まれてしまい Win ie5-5.5専用CSSが動作していないようなんですが 下記の記述に何か問題があるのでしょうか？ アドバイスいただけると助かります。 @charset "utf-8"; /*Mac ie5読み込み阻止対策\*/ @import "reset.css"; @import "default.css"; @media tty { i {content : “\”;/*” “*/}} @import ‘win-ie5-55.css’; /*”;} }/* */ /*Mac ie5読み込み阻止対策*/

    • 締切済み
    • CSS
  • 右端に1ｐｘの余白ができてしまう

    Firefox3.6・IE8では正常に表示できるのですが、Google chrome・IE6で右に1pxの余白ができてしまいます。（Operaは未確認） スクロールバーが出ると発生してしまうのですが、CSSとHTMLを見直してもどこが問題なのか判らず、行き詰まっています。 初歩的だと思いますが、よろしくお願いします。 ファイル：http://kissho.xii.jp/1/src/1jyou105039.zip.html

    • ベストアンサー
    • CSS
  • IEとファイヤーフォックスでのレイアウト違い

    外部CSSにてレイアウト組んだのですがIE７とファイヤーフォックスで微妙に違うレイアウトになってしまいます。。 IEですとメインフラッシュの横に１ｐｘ程度の白い空白ができてしまいます。 正しくはファイヤーフォックスのように空白がない　というようにIEでも表示させたいのですが・・・・。 どなたかお力添えいただけると幸です。。 http://studio-evah.com/test/ cssは http://studio-evah.com/test/css/css.css　です。 よろしくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する