1

<ul>とを使用してアイテムのリストを作成しました<li>。Firefoxでは正常に動作しますが、InternetExplorer6および7ではリストの箇条書きが表示されません。

これが私がしたことです：
私はグローバルul , liリセット値を持っています。その後、2つの<ul>ブロックを使用して2つの列リストを作成しました。ul liCSSのグローバルスタイル値noneを上書きして、スタイルを。としてリストしdiscます。これを行うと、箇条書きの項目が表示されますが、ulの幅を特定の値として設定するとli、IEで箇条書きが消えます。

リストスタイルを使用しlist-style-image: url(bullet.gif)ても、IE6および7には表示されません。

これがHTMLコードです。これを見て、すべてのブラウザで箇条書きをアーカイブできる方法を教えてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>List Sample</title>
<style>
* { padding: 0; margin: 0; }

body { font-size: 62.5%; background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; color:#000000;margin:0; }
p,ul { font-size: 1em; }
li { list-style: none; font-size: 1em }
.clear { clear: both; height:0px; font-size:0px;}

#box1{ font-size:1.5em; margin:10px 0px 0px 10px; width:350px; border:1px solid red; padding:10px 20px; clear:both;}
#box1 ul#listLeft{ display:inline;}
#box1 ul#listLeft li{ list-style:disc; border:1px solid red; width:150px; float:left;}
#box1 ul#listRight li{ list-style:disc; border:1px solid red; width:150px; float:left;}
</style>

</head>
<body>
<div id="box1">
<ul id="listLeft">
<li>Popular articles</li>
<li>Submit news</li>
<li>Newsletter</li>
<li>Design contest</li>
<li>Winners list</li>
</ul>
<ul id="listRight">
<li>Popular articles</li>
<li>Submit news</li>
<li>Newsletter</li>
<li>Design contest</li>
<li>Winners list</li>
</ul>
<div class="clear"></div>
</div>
</body>
4

1 に答える 1

2

ネイティブのディスクの弾丸の場合、マージン、パディングが必要です..試してみてください

ul li { margin:0 0 0 15px; padding:0 0 0 15px; }

そして、一貫性が得られるまで、これらのいずれかの左を減らし続けます (どのブラウザがどれを使用しているかは忘れてしまいます - それらの 1 つだけに頼ることができるかもしれません)。画像を使用する場合は、次のようにします。

ul li { background:url(/images/bullet.gif); zoom:1; }

ズームは IE の奇妙さを打ち消すためのものですが、時には奇妙さを生み出します。デザインに応じて背景の位置を設定することを忘れないでください。

于 2009-10-20T07:25:08.003 に答える