html - 列表元素符号在 IE7 中消失

Question

关于

所以这个问题被问了一次又一次，但我注意到有些不同； 见下文。

标准信息:

• FF 中的元素符号显示
• 元素符号未出现在 IE 中

发现

• 在 <ul> 上设置 hasLayout 时元素符号消失元素，而不是 <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"     

李:

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>

在带和不带zoom:1 的IE7 中尝试以上操作.
注意: 因为这涉及到 hasLayout 其他版本的 IE 可能会受到影响。

Answer 1

我发现:

• 设置li {margin-left: 1em}成功了
• 在 {margin-left:9px}你会开始看到子弹右边缘的边缘

另一个有趣的事情是触发列表项上的 hasLayout ( <li> )，将强制元素符号到文本 block 的底部。因此，如果您使用类似 *{zoom:1} 的东西, 你需要垂直对齐你的 li在顶部:li{vertical-align:top}