List Bullet在IE7中消失

时间：2010-10-21 14:52:51

标签： html css internet-explorer-7 haslayout

关于

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

标准信息：

  • 子弹显示在FF
    • 中
  • Bullet未出现在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"

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>会修改项目符号吗？
我认为它可能是边距/填充，但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>

在IE7中尝试使用以上内容，而不是zoom:1 注意： 因为这涉及hasLayout其他版本的IE可能会受到影响。

2 个答案:

答案 0 :(得分：12)

我找到了：

  • 设置li {margin-left: 1em}可以解决问题
  • 在{margin-left:9px}您将开始看到子弹右边缘的边缘

另一件有趣的事情是，在列表项（<li>）上触发hasLayout会强制子弹到文本块的底部。因此，如果您使用*{zoom:1}之类的内容，则需要将li垂直对齐在顶部：li{vertical-align:top}

答案 1 :(得分：1)

由于浏览器和浏览器版本中的子弹位置和大小不同，我停止使用默认项目符号，现在用图像替换它们。这解决了我对子弹的所有问题，你现在可以轻松改变子弹的大小，颜色和形状。

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选择器

相关问题
最新问题