Список пули исчезает в IE7

Около

Так что этот вопрос задавался снова и снова, но я заметил кое-что немного другое; смотри ниже.

Стандартная информация:

  • Пуля отображается в FF
  • Пуля не появляется в IE

обнаружение

  • Пуля исчезает при установке hasLayout на <ul> элемент, а не <li>; это часто достигается при выполнении * {zoom: 1}

Firebug в 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"


Любая идея, почему установка макета на <ul> модифицирует пулю?
Я думал, что это может быть margin / padding, но Firebug в IE показывает то же самое без / 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,
Примечание: поскольку это имеет дело с hasLayout, вероятно, затронуты другие версии IE.

Источник

2 ответа

Решение

Я нашел:

  • установка li {margin-left: 1em} делает трюк
  • в {margin-left:9px} вы начнете видеть край правого края пули

Еще одна интересная вещь - запуск 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

Источник
Другие вопросы по тегам