gpt4 book ai didi

css - float 列表项导致元素符号/数字在 webkit 上消失

转载 作者:太空宇宙 更新时间:2023-11-04 14:19:53 25 4
gpt4 key购买 nike

我的CSS:

ul, ol {
margin:0 0 1em 0;
}
ul:after, ol:after, ul:before, ol:before {
content: ".";
display: block;
clear: both;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
li {
clear: both;
float: left;
}

我的 html 是任何普通的列表结构

在 Firefox 上按预期工作,并显示为正常的元素符号列表或有序列表。

但是,在 Webkit 浏览器 Chrome/Safari 上,缩进符合预期,但列表样式不存在。

这里讨论的解决方案 ( Show unordered list inline, but keep the bullets ) 不适用于我,因为我需要为无序列表和有序列表解决这个问题。然而,IE7 不是必需的(IE8+ 是)。

float 列表项很奇怪,我知道,但这是我正在构建的文本选择 UI 的要求。

请注意,虽然这在 JSFiddle 中有效,但纯 HTML/CSS 页面演示了此行为:

<html>
<head>
<style type="text/css">
ul, ol {
margin:0 0 1em 0;
}
ul:after, ol:after, ul:before, ol:before {
content: ".";
display: block;
clear: both;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
li {
clear: both;
float: left;
margin: 0;
}
</style>
</head>
<body>

<ul>
<li>two eggplants, not too fat</li>
<li>red sauce, hopefully from your kitchen</li>
<li>fresh mozzarella</li>
<li>basil</li>
<li>breadcrumbs, or stale/dried bread to make them</li>
<li>a couple of eggs for breading</li>
<li>parmigiana cheese for breading</li>
</ul>

</body>
</html>

最佳答案

<!DOCTYPE html>

我一天中的大部分时间...总是使用 DTD

也适用于 4.01 strict。

悲伤

关于css - float 列表项导致元素符号/数字在 webkit 上消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20012416/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com