IE7で弾丸が消えるリストをリストします
https://stackoverflow.com/questions/3988798
-
10-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
約
したがって、この質問は何度も何度も尋ねられましたが、私は少し違うことに気づきました。 下記参照.
標準情報：
- FFでの弾丸ディスプレイ
- 弾丸はIEに表示されません
発見
- 弾丸は、にhaslayoutを設定すると消えます
<ul>要素ではなく<li>;これは、 *{Zoom：1}を実行するときにしばしば達成されます
Internet ExplorerのFirebug
UL：
backgroundAttachment "scroll"
backgroundColor "transparent"
backgroundImage "none"
backgroundRepeat "repeat"
borderBottomColor "#000000"
borderBottomStyle "none"
borderBottomWidth "medium"
borderCollapse "separate"
borderColor "#000000"
borderLeftColor "#000000"
borderLeftStyle "none"
borderLeftWidth "medium"
borderRightColor "#000000"
borderRightStyle "none"
borderRightWidth "medium"
borderStyle "none"
borderTopColor "#000000"
borderTopStyle "none"
borderTopWidth "medium"
borderWidth "medium"
bottom "auto"
clear "none"
color "#000000"
cursor "move"
direction "ltr"
display "block"
fontFamily "tahoma, arial, helvetica, sans-serif"
fontSize "0.9em"
fontStyle "normal"
fontVariant "normal"
fontWeight 400
height "auto"
left "auto"
letterSpacing "normal"
lineHeight "normal"
listStyleImage "none"
listStylePosition "outside"
listStyleType "disc"
margin "auto auto auto 30pt"
marginBottom "auto"
marginLeft "30pt"
marginRight "auto"
marginTop "auto"
maxHeight "none"
maxWidth "none"
minHeight "auto"
minWidth "auto"
overflow "visible"
padding "0px"
paddingBottom "0px"
paddingLeft "0px"
paddingRight "0px"
paddingTop "0px"
pageBreakAfter "auto"
pageBreakBefore "auto"
position "static"
right "auto"
tableLayout "auto"
textAlign "left"
textDecoration "none"
textIndent "0pt"
textTransform "none"
top "auto"
unicodeBidi "normal"
verticalAlign "auto"
visibility "inherit"
whiteSpace "normal"
width "auto"
wordSpacing "normal"
LI：
backgroundAttachment "scroll"
backgroundColor "transparent"
backgroundImage "none"
backgroundRepeat "repeat"
borderBottomColor "#000000"
borderBottomStyle "none"
borderBottomWidth "medium"
borderCollapse "separate"
borderColor "#000000"
borderLeftColor "#000000"
borderLeftStyle "none"
borderLeftWidth "medium"
borderRightColor "#000000"
borderRightStyle "none"
borderRightWidth "medium"
borderStyle "none"
borderTopColor "#000000"
borderTopStyle "none"
borderTopWidth "medium"
borderWidth "medium"
bottom "auto"
clear "none"
color "#000000"
cursor "move"
direction "ltr"
display "block"
fontFamily "tahoma, arial, helvetica, sans-serif"
fontSize "0.9em"
fontStyle "normal"
fontVariant "normal"
fontWeight 400
height "auto"
left "auto"
letterSpacing "normal"
lineHeight "normal"
listStyleImage "none"
listStylePosition "outside"
listStyleType "disc"
margin "auto"
marginBottom "auto"
marginLeft "auto"
marginRight "auto"
marginTop "auto"
maxHeight "none"
maxWidth "none"
minHeight "auto"
minWidth "auto"
overflow "visible"
padding "0px"
paddingBottom "0px"
paddingLeft "0px"
paddingRight "0px"
paddingTop "0px"
pageBreakAfter "auto"
pageBreakBefore "auto"
position "static"
right "auto"
tableLayout "auto"
textAlign "left"
textDecoration "none"
textIndent "0pt"
textTransform "none"
top "auto"
unicodeBidi "normal"
verticalAlign "auto"
visibility "inherit"
whiteSpace "normal"
width "auto"
wordSpacing "normal"
レイアウトを設定する理由があります <ul> 弾丸を変更しますか？
私はそれがマージン/パディングかもしれないと思ったが、IEのFirebugは同じw/| w/o haslayoutを示している。
裸のページの例：
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Default</title>
<style type="text/css" media="all">ul {zoom:1;}</style>
</head>
<body>
<ul>
<li>foo</li>
<li>bar</li>
<li>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
</li>
</ul>
</body>
</html>
IE7で上記を試してみてください zoom:1.
ノート： これは、IEの他のバージョンのHaslayoutを扱っているため、おそらく影響を受けます。
解決
私が見つけた：
- 設定
li {margin-left: 1em}トリックをします - で
{margin-left:9px}弾丸の右端の端が見え始めます
もう1つの興味深いことは、リスト項目のHaslayoutをトリガーすることです（<li>）、弾丸をテキストブロックの下部に強制します。したがって、あなたがようなものを使用している場合 *{zoom:1}, 、垂直に整列する必要があります li 頂点で： li{vertical-align:top}
他のヒント
ブラウザとブラウザのバージョン全体で弾丸の位置とサイズが異なるため、デフォルトの弾丸の使用を停止し、画像に置き換えました。これにより、私が弾丸で抱えていたすべての問題が修正され、弾丸のサイズ、色、形状を簡単に変更できるようになりました。
ul{
list-style-type: none;
list-style-position: outside;
}
ul li{
margin:0;
padding: 0 0 0 16px;
background: url(bullet.gif) no-repeat left center;
}
印刷するには、画像が必ずしも印刷されていないため、デフォルトの弾丸を使用するCSSファイルを追加できます。
これは番号付きリストでは機能しません（<ol>）したがって、UL CSSセレクターを忘れないでください
所属していません StackOverflow
