Question

浏览器是IE7。我无法控制。它很糟糕，但这是我的世界。我也确认它也发生在FF3.6中，但老实说，由于公司环境，我不会让它在那里工作，只要它在IE7中工作。

此HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link type="text/css" href="test.css" rel="stylesheet"  />
</head>
<body>
  <div>
    <ul>
      <li>Top level a
         <ul>
           <li>level 2 a</li>
           <li>level 2 b</li>
           <li>level 2 c</li>
           <li>level 2 d</li>
         </ul>
      <li>
      <li>Top level b
        <ul>
           <li>another level 2 a</li>
           <li>another level 2 b</li>
           <li>another level 2 c</li>
        </ul>
      </li>
      <li>Top level c
         <ul>       
            <li>3 level 2 a</li>
            <li>3 level 2 b</li>
            <li>3 level 2 c</li>
            <li>3 level 2 d</li>
         </ul>
      </li>
    </ul>
  </div>
</body>
</html>

用这个css：

body { font: 12pt Verdana black; }
/*yellow div entirely for visibility's sake*/
div {
    width: 500px;
    height: 125px;
    background-color: yellow;
}
ul {
    margin-left: 15px;
    padding-left: 15px;
}
li { 
    margin-left: 15px;
    padding-left: 15px;
}
div ul {
    list-style-type: none;
}
div ul li {
    font-weight: bold;
    display: inline;
    float: left;
    width: 140px;
}
div ul li ul { 
    list-style-type: disc;
}
div ul li ul li {
    font-weight: normal;
    display: list-item;
    width: 100%
}

我的期望： “顶级”项目将从左到右显示在一行中他们的子列表将显示为相应顶级项目下方的垂直列表。子列表还将在每个项目之前将光盘作为子弹。

我得到了什么：顶级项目按预期显示，从左到右依次排列它们按预期显示为垂直列表。然而，子弹丢失了。

这是一个绝望的案子吗？或者我可以用正确的代码击败IE7吗？

Answer 1

您的所有<li>都是浮动的。你只想漂浮顶级的，对吧？然后将float:none应用于更深层的那些。而且您无需将显示类型更改为内联; float会自行完成这个技巧。

顺便问一下，字体名称是什么？ Verdana Black？然后强烈建议在名称旁边加上引号。

Answer 2

浮动是移除子弹点的内容，float: left中的div ul li由div ul li ul li继承。

解决方案？

将float: none添加到div ul li ul li。

此外，您错过了“顶级a”关闭li

的斜杠

Answer 3

在树上，添加BODY：

body div ul li ul { list-style-type: disc }

诉诸!important通常意味着需要重新考虑您的CSS。

通过使选择器更具体，您通常可以覆盖大多数类。

请参阅：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 4

将其应用于li标记。

Answer 5

也许子弹不在列表的查看空间内（隐藏）如果不能正常工作，请尝试回答以上尝试边距和/或从左边填充。

Answer 6

检查子弹的颜色是否与背景不匹配。因为它们是不可选择的，如果你只是不注意这可能是问题，很难弄明白。

als用firebug或chromes调试器检查你的元素......如果没有设置选择器可能是错误的。如果有什么东西设置它会被覆盖，或者问题就在某个更深层次的内部和loughing

IE7中缺少子弹

6 个答案: