List Bullet Disappear in IE7
https://stackoverflow.com/questions/3988798
-
10-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
über
Also diese Frage gestellt und immer wieder ist, aber ich merkte, etwas ein wenig anders; siehe unten .
Standard Info:
- Bullet-Displays in FF
- Bullet erscheint nicht im IE
Suchen
- Die Kugel verschwindet, wenn ein hasLayout auf dem
<ul>Element Einstellung, nicht die<li>; dies wird oft erreicht, wenn * tun {vergrößern: 1}
Firebug in Internet Explorer
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"
Jede Idee, warum die Einrichtung eines Layout <ul> ändert die Kugel?
Ich dachte, es könnte die Marge / padding, aber Firebug in IE zeigt die gleiche w / | w / o hasLayout.
Bare Seite Beispiel:
<!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>
Versuchen Sie, die oben in IE7 w / und w / o der zoom:1.
. Hinweis: , weil diese sich mit hasLayout anderen Versionen von IE sind wahrscheinlich betroffen
Lösung
ich gefunden:
-
li {margin-left: 1em}Einstellung funktioniert der Trick - bei
{margin-left:9px}Sie beginnen den Rand der rechten Kante des Geschosses zu sehen
Eine weitere interessante Sache ist, dass der hasLayout auf dem Listenelement Triggerung (<li>), wird die Kugel des Textblockes auf den Boden zwingen. Wenn Sie also so etwas wie *{zoom:1} verwenden, müssen Sie vertikal Ihre li an der Spitze ausrichten: li{vertical-align:top}
Andere Tipps
Aufgrund der unterschiedlichen Kugel Positionen und Größen in allen Browsern und Browser-Versionen habe ich aufgehört, die bei Standard-Bullets verwenden und jetzt ersetzen Sie sie mit einem Bild. Dies behebt alle Probleme, die ich mit Kugeln hatte, und Sie können jetzt leicht Größe, Farbe und Form der Kugeln.
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;
}
Für den Druck können Sie eine CSS-Datei hinzufügen, die die Standardaufzählungszeichen verwendet, weil die Bilder nicht immer gedruckt.
Das funktioniert nicht für nummerierte Listen (<ol>), so vergessen Sie nicht, den ul CSS-Selektor
