Lista con viñetas desaparecer en IE7
https://stackoverflow.com/questions/3988798
-
10-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Sobre
Así que esta pregunta se ha hecho una y otra vez, pero me di cuenta de algo un poco diferente; ver abajo .
Información del estándar:
- Bullet muestra en FF
- bala no aparece en IE
Finding
- La bala desaparece cuando se establece un hasLayout en el elemento
<ul>, no el<li>; esto se logra a menudo cuando se hace un zoom * {1}
Firebug en 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"
Cualquier idea de por qué el establecimiento de un diseño a <ul> modifica la bala?
Pensé que podría ser el margen / relleno, pero Firebug en IE está mostrando el mismo w / | w / o hasLayout.
Bare Página Ejemplo:
<!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>
Trate de lo anterior en IE7 w / w y / o la zoom:1.
Nota:. porque se ocupa de esta hasLayout otras versiones de IE son probablemente afectados
Solución
he encontrado:
- establecer
li {margin-left: 1em}hace el truco - en
{margin-left:9px}usted comenzará a ver el borde del borde derecho de la bala
Otra cosa interesante es que la activación de la hasLayout en el elemento de la lista (<li>), obligará a la bala en la parte inferior del bloque de texto. Por lo tanto, si usted está usando algo como *{zoom:1}, tendrá que alinear verticalmente el li en la parte superior: li{vertical-align:top}
Otros consejos
Debido a las diferentes posiciones de bala y tamaños en los navegadores y versiones de navegadores he dejado de utilizar las balas por defecto y ahora reemplazarlos con una imagen. Esto soluciona todos los problemas que tuve con balas, y ahora se puede cambiar fácilmente el tamaño, color y forma de las balas.
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;
}
Para la impresión se puede añadir un archivo CSS que utiliza las balas por defecto ya que las imágenes no se imprimen siempre.
Esto no funciona para listas numeradas (<ol>) por lo que no se olvide de la ul CSS selector
