2011-12-30 32 views
2

私が作成しているサイトでIE6と7に問題があります。see hereです。サイドバーとメニューの順序付けられていないリストの間に突然余分なスペースが表示されます。 IE 6/7 CSS問題:リスト項目の余分なパディング/余白

はここでここで


IE8
だとIE9は同様に動作


IE7
ここ


IE6
だのですあなたが見ることができるように


、IE8とIE9は正常に動作します。メニューはサイドバーに突き当たる。私はしばらくそれをだましていますが、それを修正することはできませんでした。

HTML構造は、単にdiv>のUL>李は私がすべてのコードを記述する前に、CSSをリセットして、あまりにもすべてをゼロにしました

です。これを引き起こしていることは誰にも分かりますか?

助けをお寄せいただきありがとうございます

+0

おそらくhaslayoutに関連しています:http://stackoverflow.com/questions/5801338/list-bullets-not-displaying-correctly-in-internet-explorer – Rob

+0

Firebug Liteはどこから来ているのですか?またはIE独自のデバッグツール?私はジェイソンと同意しますが、IE <9がちょうどすでに死んでしまうような時です。 – powerbuoy

答えて

4

display: inlinefloat: left、そしてあなたのli sのwidth: 100%を追加してみてください。 Browserlingでテスト

DEMO

+0

が働いた!私はディスプレイを追加しました:#sidebar ul liにインラインで表示を追加しました:#sidebar ul liにブロック –

+0

@GarrettLeyenaar喜んでください。 –

3

CSSが付いていないと難しいです。

しかし、私はいくつかのことを言う:

  1. それはIE6/7群集のための完璧なピクセルである必要はありませんか?インデントがあってもサイトはきれいに見えるので、修正する必要はありません。

  2. これを修正する必要がある場合は、IE6/7をターゲットとしている一部のconditional commentsを使用し、負のマージンを設定してください。

+0

完璧なピクセルである必要はありませんが、私は自分のスキルをアップして、なぜそれがそれをしていたのか把握したかったのです。助けてくれてありがとう!私はあなたが時間を尊敬していただきありがとうございます! –

0

1)あなたは、HTMLページのheadタグの前にこれらの行を追加する必要があります。 IEブラウザのバージョン、特定のクラスによる

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 
<!--[if lt IE 7 ]> <html class="no-js ie6 ieb" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]--> 
<!--[if IE 7 ]> <html class="no-js ie7 ieb" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]--> 
<!--[if IE 8 ]> <html class="no-js ie8" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]--> 
<!--[if gte IE 9 ]> <html class="no-js ie9" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]--> 
<!--[if !IE]><!--> <html class="no-js" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <!--<![endif]--> 

2)は、これらの行によって、あなたのHTMLコンテナに追加されます。

3)次に、特定のCSSファイル、つまりCSSの問題を追加できます。

4)そのファイルでは、そのブラウザに従ってプロパティを言及する必要があります。そのULに 追加クラス:あなたはこのように行うことができますあなたの場合は

bd_links

ie6 ul.bd_links,ie7 ul.bd_links, 
{ 
margin-left:-20px; 
} 
0

あなたはすでに、すべてのパディングマージンをzerod場合は

ul, li { 
    list-style-position: inside; 
} 

を置くことによって確認することができます。

関連する問題