Elenco puntato scompaiono in IE7
https://stackoverflow.com/questions/3988798
-
10-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Chi
Quindi questa domanda è stato chiesto più e più volte, ma ho notato qualcosa di diverso; vedi sotto .
Informazioni standard:
- schermi di richiamo in FF
- proiettile non appare in IE
Ricerca
- Il proiettile scompare quando l'impostazione di un hasLayout sull'elemento
<ul>, non il<li>; Questo è spesso realizzato quando si fa * {zoom: 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"
Qualsiasi idea del perché l'impostazione di un layout per modifica <ul> il proiettile?
Ho pensato che potrebbe essere il margine / padding, ma Firebug in IE sta mostrando lo stesso w / | w / o hasLayout.
Bare Pagina Esempio:
<!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>
Prova quanto sopra in IE7 w / e w / o il zoom:1.
Nota. perché questa si occupa di hasLayout altre versioni di IE sono probabilmente influenzati
Soluzione
ho trovato:
- impostazione
li {margin-left: 1em}fa il trucco - a
{margin-left:9px}potrai iniziare a vedere il bordo del bordo destro del proiettile
Un'altra cosa interessante è che scattare l'hasLayout sulla voce dell'elenco (<li>), costringerà il proiettile alla parte inferiore del blocco di testo. Quindi, se stai usando qualcosa come *{zoom:1}, avrete bisogno di allineare verticalmente il vostro li in alto: li{vertical-align:top}
Altri suggerimenti
A causa delle diverse posizioni dei proiettili e dimensioni attraverso browser e versioni di browser ho smesso di usare i proiettili di default ed ora sostituirli con un'immagine. Questo risolve tutti i problemi che ho avuto con i proiettili, e ora si può facilmente cambiare le dimensioni, il colore e la forma dei proiettili.
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;
}
Per la stampa è possibile aggiungere un file CSS che utilizza i proiettili predefinite perché le immagini non vengono sempre stampati.
Questo non funziona per gli elenchi numerati (<ol>) in modo da non dimenticare l'ul css di selezione
