html – 列表子弹在IE7中消失

前端之家收集整理的这篇文章主要介绍了html – 列表子弹在IE7中消失前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
关于

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

标准信息:

>子弹显示在FF中
> Bullet不会出现在IE中

查找

>在< ul>上设置hasLayout时子弹消失了元素,而不是< li&gt ;;这通常在做* {zoom:1}时完成
Internet Explorer中的Firebug

UL:

  1. backgroundAttachment "scroll"
  2. backgroundColor "transparent"
  3. backgroundImage "none"
  4. backgroundRepeat "repeat"
  5. borderBottomColor "#000000"
  6. borderBottomStyle "none"
  7. borderBottomWidth "medium"
  8. borderCollapse "separate"
  9. borderColor "#000000"
  10. borderLeftColor "#000000"
  11. borderLeftStyle "none"
  12. borderLeftWidth "medium"
  13. borderRightColor "#000000"
  14. borderRightStyle "none"
  15. borderRightWidth "medium"
  16. borderStyle "none"
  17. borderTopColor "#000000"
  18. borderTopStyle "none"
  19. borderTopWidth "medium"
  20. borderWidth "medium"
  21. bottom "auto"
  22. clear "none"
  23. color "#000000"
  24. cursor "move"
  25. direction "ltr"
  26. display "block"
  27. fontFamily "tahoma,arial,helvetica,sans-serif"
  28. fontSize "0.9em"
  29. fontStyle "normal"
  30. fontVariant "normal"
  31. fontWeight 400
  32. height "auto"
  33. left "auto"
  34. letterSpacing "normal"
  35. lineHeight "normal"
  36. listStyleImage "none"
  37. listStylePosition "outside"
  38. listStyleType "disc"
  39. margin "auto auto auto 30pt"
  40. marginBottom "auto"
  41. marginLeft "30pt"
  42. marginRight "auto"
  43. marginTop "auto"
  44. maxHeight "none"
  45. maxWidth "none"
  46. minHeight "auto"
  47. minWidth "auto"
  48. overflow "visible"
  49. padding "0px"
  50. paddingBottom "0px"
  51. paddingLeft "0px"
  52. paddingRight "0px"
  53. paddingTop "0px"
  54. pageBreakAfter "auto"
  55. pageBreakBefore "auto"
  56. position "static"
  57. right "auto"
  58. tableLayout "auto"
  59. textAlign "left"
  60. textDecoration "none"
  61. textIndent "0pt"
  62. textTransform "none"
  63. top "auto"
  64. unicodeBidi "normal"
  65. verticalAlign "auto"
  66. visibility "inherit"
  67. whiteSpace "normal"
  68. width "auto"
  69. wordSpacing "normal"

李:

  1. backgroundAttachment "scroll"
  2. backgroundColor "transparent"
  3. backgroundImage "none"
  4. backgroundRepeat "repeat"
  5. borderBottomColor "#000000"
  6. borderBottomStyle "none"
  7. borderBottomWidth "medium"
  8. borderCollapse "separate"
  9. borderColor "#000000"
  10. borderLeftColor "#000000"
  11. borderLeftStyle "none"
  12. borderLeftWidth "medium"
  13. borderRightColor "#000000"
  14. borderRightStyle "none"
  15. borderRightWidth "medium"
  16. borderStyle "none"
  17. borderTopColor "#000000"
  18. borderTopStyle "none"
  19. borderTopWidth "medium"
  20. borderWidth "medium"
  21. bottom "auto"
  22. clear "none"
  23. color "#000000"
  24. cursor "move"
  25. direction "ltr"
  26. display "block"
  27. fontFamily "tahoma,sans-serif"
  28. fontSize "0.9em"
  29. fontStyle "normal"
  30. fontVariant "normal"
  31. fontWeight 400
  32. height "auto"
  33. left "auto"
  34. letterSpacing "normal"
  35. lineHeight "normal"
  36. listStyleImage "none"
  37. listStylePosition "outside"
  38. listStyleType "disc"
  39. margin "auto"
  40. marginBottom "auto"
  41. marginLeft "auto"
  42. marginRight "auto"
  43. marginTop "auto"
  44. maxHeight "none"
  45. maxWidth "none"
  46. minHeight "auto"
  47. minWidth "auto"
  48. overflow "visible"
  49. padding "0px"
  50. paddingBottom "0px"
  51. paddingLeft "0px"
  52. paddingRight "0px"
  53. paddingTop "0px"
  54. pageBreakAfter "auto"
  55. pageBreakBefore "auto"
  56. position "static"
  57. right "auto"
  58. tableLayout "auto"
  59. textAlign "left"
  60. textDecoration "none"
  61. textIndent "0pt"
  62. textTransform "none"
  63. top "auto"
  64. unicodeBidi "normal"
  65. verticalAlign "auto"
  66. visibility "inherit"
  67. whiteSpace "normal"
  68. width "auto"
  69. wordSpacing "normal"

知道为什么要将布局设置为< ul>修改子弹?
我认为它可能是边距/填充,但IE中的Firebug显示相同的w / | w / o hasLayout.

裸页示例:

  1. <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
  2. <html>
  3. <head>
  4. <title>Default</title>
  5. <style type="text/css" media="all">ul {zoom:1;}</style>
  6. </head>
  7. <body>
  8. <ul>
  9. <li>foo</li>
  10. <li>bar</li>
  11. <li>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
  12. foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
  13. foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
  14. foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
  15. foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
  16. foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
  17. foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
  18. foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
  19. foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
  20. foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
  21. foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
  22. foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
  23. foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
  24. foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
  25. </li>
  26. </ul>
  27. </body>
  28. </html>

在IE7中尝试上面的w /和缩放:1.
注意:因为这涉及hasLayout其他版本的IE可能会受到影响.

解决方法

我发现:

>设置li {margin-left:1em}就可以了
>在{margin-left:9px},你将开始看到子弹右边缘

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

猜你在找的HTML相关文章