3

IE7 と Firefox/Chrome/Opera の順序付けられていないリストの垂直方向のスペースの量に関する問題が進行中であり、そこに解決策が見つからないようです。

IE7では、スペースが少なくなり、私が見たいものです。

Firefox、Chrome、Opera では、間隔は約 2 倍です。

コードまたはページのスペーシングの問題を説明できません。私のページでは、コードは次のようになります。

<!--BEGIN SIDEBOX-->
<div id="sidebox_new">
<div id="sidebox_top"><div id="sup">SUPPORT LINKS</div></div>
<div id="sidebox_bod">
<br />
<ul>
<li><a href="training.aspx">User Training</a></li><br /><br />
<li><a href="faqs.aspx">FAQ</a></li><br /><br />
<li><a href="logonasst.aspx">Logon Assist. Center</a></li><br /><br />
<li><a href="faxus.aspx">Fax Us</a></li><br /><br />
<li><a href="callus.aspx">Call Us</a></li><br /><br />
<li><a href="feedback.aspx">General Feedback</a></li>
</ul>
</div>
<div id="sidebox_btm"></div>
</div>
<!--END SIDEBOX-->

このセクションの CSS は次のようになります。

#sidebox_bod
{
width: 200px;
margin: 0 30px 0 0;
padding: 0;
background: url('../img/supbxbod.gif');
background-repeat:repeat-y;
background-position:bottom;
}

#sidebox_bod ul
{
list-style-image:url('../triangle.gif'); 
text-align:left;
padding: 0 0 0 30px;
margin: 0;
}

#sidebox_bod ul li a
{
font-size: 13px;
}

すべてのブラウザで垂直方向の間隔を同じにするために何ができるか考えていますか? これを修正するには、IE7 の外観を使用することをお勧めします。ありがとう。

4

2 に答える 2

7

現在発生している問題は、各ユーザー エージェント (ブラウザー) に独自のデフォルト スタイルがあり、それぞれ異なる可能性があるという事実によるものです。

これらのスタイルを無力化し、ユーザーエージェント間でより一定のレンダリングを実現するために、スタイルシートのリセットが存在します。これにより、基本的にすべての要素の問題が解消されます。

その特定のケースではmargin、paddingとline-heightof#sidebox_bod ul liをいじると問題が解決します。

#sidebox_bod ul { margin: 0; padding: 0 16px; line-height: 1em; }

ただし、リセット CSS を使用することをお勧めします。これにより、すべての要素の問題のほとんどが解決されます。

于 2010-04-01T16:13:37.380 に答える
0

リストアイテムの間にブレークタグを使用することはお勧めできません。リストアイテムの間隔には、特定のマージン、パディング、および/または行の高さのスタイルを設定する必要があります。そうしないと、予測できなくなります。

正確な対称性が必要な場合は、測定に「ems」を使用しないことをお勧めします。これは、ブラウザやオペレーティングシステムによってレンダリングが大きく異なるためです。

IEには空白の問題もいくつかありますが、通常は、スペースが少なくなるのではなく、多くなります...

スタイルシートのリセットに関する上記の投稿者のコメントについて-この場合、自分のサイトに特定のスタイルを設定する方がよいと思います。サイトのスタイルを設定している場合、スタイルシートのリセットはほとんど不要/冗長になる可能性があります（参照：http：//meiert.com/en/blog/20080419/reset-style-sheets-are-bad/）

CSSファイル全体とhtmlコンテキストを確認せずにデバッグするのは非常に難しいため、サイトへのリンクはすばらしいでしょう。

于 2010-04-01T16:51:32.303 に答える