我怎样才能浮动列表项目在IE7中显示他们的子弹？

我有一个浮动列表项应使用标准项目符号列表。但在IE7只，这些子弹不会出现：我怎样才能浮动列表项目在IE7中显示他们的子弹？

这里是所有代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Title</title> 

<style type="text/css"> 
/*ul { overflow: hidden; margin: 1em; padding: 1em; } */ 
ul li 
    { width: 30%; 
    float: left; 
    border: dashed red 1px; 
/* list-style-position: outside; list-style-type: disc; margin-left: 1em; padding: 1em; zoom: 1; */ 
    } 
</style> 

</head> 

<body> 

    <ul> 
    <li>Lorem ipsum dolor sit </li> 
    <li>consectetuer adipiscing elit</li> 
    <li>Etiam sapien neque</li> 
    <li>dictum at</li> 
    <li>bibendum ut</li> 
    <li>posuere quis</li> 
    </ul> 

</body> 
</html>

被注释掉的CSS是我尝试过，但规则，并没有使子弹出现。

当我删除float: left;声明时，项目符号确实出现在IE7中。

我怎样才能浮动lis与项目符号显示在IE7？

来源

2010-09-01 KatieK

'list-style-position：inside'可能工作，我认为'outside'是默认值。如果没有尝试调整'margin-left'属性。 – 2010-09-01 23:15:51

我不得不用一种变通方法来获取子弹在IE7中显示。我创建了一个子弹的图像，并将其设置为LI的背景图像以及一些额外的填充。

虽然我很乐意接受其他答案！ ;）

来源

2010-09-13 17:51:46 KatieK

除了我的评论（对于这个问题），一个演示发布在JSBin。

用下面的CSS似乎实现你的目标：

ul li { 
float: left; 
list-style-position: inside; 
margin: 0 0 0 1em; 
}

来源

2010-09-01 23:18:51

该代码和JSBin演示在Firefox3中显示子弹，但不在IE7中显示。 – KatieK 2010-09-01 23:35:04

@KatieK，* darn *，我不确定这是为什么，但我会尽快回复您。 :) – 2010-09-02 00:05:41

TY @David Thomas，它在IE 10上为我工作 – LuAmbros 2013-08-16 20:26:38

我看到子弹在Safari消失在MacOS，以及...我发现a page，在一个评论，给了我为我工作的解决方案：把一个display: list-item;风格到a或当他们出现span标签的li里面，像这样：

CSS：

ul li { 
    width: 30%; /* or whatever; copying your example */ 
    float: left; 
} 

ul li a, ul li span { 
    display: list-item; 
}

HTM L：

<ul> 
    <li><a href="some/thing">link to something</a></li> 
    <li><span>not a link</span></li> 
    <li> ... [oops, no bullet!] </li> 
</ul>

。注意，在一个a标签的情况下，子弹将是链路的一部分（和有色为一体，等）。使用跨度（并删除ul li a样式），这应该是可以避免的。

不幸的是，这确实意味着改变你的标记......但至少它有希望不是完全不合理的改变类型。

另外值得注意的是：这也适用于ol列表，同时还有一个有趣的警告：如果你停止浮动它们（并因此它们恢复正常的编号），你最终会得到每个项目编号两次！所以，要小心这样做对所有的li a或li span的组合;也许你会想要使用一个类来处理这样的列表，并且只将这些样式应用于该类。例如，人们可能会以上更改为：

.floated li { width: 30%; float: left; } 
.floated li a, .floated li span { display: list-item; }

我希望这有助于（如果不是原来的提问，这是如此古老，那么一个人，一段时间）。

来源

2013-08-20 14:17:52 lindes

我怎样才能浮动列表项目在IE7中显示他们的子弹？

回答

相关问题