2009-06-19 13 views
0

IE8とQuirksモードで実行中に2つの画像の間に不思議なパディングがあります。この2つのイメージは、私の将来のウェブサイトのロゴとして機能します。IE8で動作するCSSの問題Quirksモード

私は問題を単一のhtmlファイル http://etcbc.org/ie_problem/ie.htmlに分けました。

「東のトロントのバプテスト教会」と言うことがあります。ご覧のとおり、現在は "toro" "nto"の間にスペースがあります。何がIE8のこのスペースの原因で、Quirksモードで動作していますか?

+2

あなたはFirefoxでより大きな問題を抱えています:イメージは並んでいません。 –

+1

私はあなたのコメントに合わせて私の答えを更新しましたが、画像を読み込むときに "401 Authorization Required"というエラーが出るので、自分自身で新しいソリューションをテストすることはできません。 –

答えて

2

IE以外のブラウザは、そのページでさらに悪化しています。

あなたの画像はそれぞれ<a />タグであり、スタイルは「display: block;」です。表示ブロックは、通常、各要素をそれ自身の行に配置します(それに適用される他のスタイルに応じて)。

これを修正するには、要素から「display:block」スタイルを削除します。

<a href="http://www.etcbc.org/"> 
    <img style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; text-decoration: none; padding-top: 0px" src="logo_1.png" /> 
</a> 
<a href="http://www.etcbc.org/"> 
    <img style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; text-decoration: none; padding-top: 0px" src="logo_2.png" /> 
</a> 

あなたはブロックレベル要素であるためにあなたの画像が必要な場合は、使用は、ページ上の浮動要素を配置することにより生じたいかなる(潜在的な)レイアウトの問題を修正するために、その後、お互いにそれらを合わせthis clever solutionを使用することが浮かびます。

可能であれば、インライン展開するのではなく、スタイルにクラスを使用することを検討する必要があります。物事が今立つところで、彼らは維持の悪夢になるだろう。

また、あなたがコントロールしている場合は、ページのHTMLにput a doctype(私はXHTML 1.0 Transitionalを使用することをおすすめします。クールな子供たちがそれをやっています!)を使ってQuirksモードをオンにしないでください。 Quirksモードを有効にしておくと、特に「新しい」手法を使用してサイトをユーザーに適したものにしようとすると、頭痛を引き起こす可能性があります。

+0

こんにちは。回答ありがとうございます。私は、拡張可能なメニューのためのスペースを作るために、画像を自分のリンクにする必要があります。 Webページを更新してメニューを表示し、右から左に拡大する方法を示しています。 IEの開発者ツールバーからHTML/CSSコードをコピーしたので、CSSはインラインで表示されます。実際のコードはCSSファイルを参照し、インラインCSSは使用しません。 – burnt1ce

1

有効なDOCTYPEを使用してquirksmodeから抜け出す:quirksmodeはないいくつかのものと

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
1

だけで簡単にリンク:

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

それが言うことデフォルトの水平マージンquirksmodeの画像は3ピクセルです。そしてそのパディングはCSSでは無視されるので、そうかもしれません。

関連する問題