gpt4 book ai didi

html - Explorer 与 Firefox 和 Chrome 中的不同列表项对齐方式

转载 作者:太空宇宙 更新时间:2023-11-04 13:29:31 26 4
gpt4 key购买 nike

我有一个有序列表,其中嵌套了一个无序列表。有序列表项提供连续年份,无序列表项是指向类(class)照片等的链接。非常简单,对吧?

它们在 Chrome、Firefox 和我的旧 Windows 版本的 Safari 中正确显示,但在资源管理器中显示了一个额外的空间。

2 月 17 日星期五编辑:这是一个包含所有 html 和 css 的示例。它在 Firefox 和 Chrome 中可以正常显示,但在 IE 中会产生额外的空间。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test for StackOverflow</title>
<style type="text/css">
body {
background-color: white;
margin-left: 2%;
margin-right: 2%;
font-family: Helvetica, sans-serif;
line-height:1.2;
max-width:100%;
}

li.year {
font-weight: bold;
font-size: larger;
border: 1px solid black;
padding: 0.1em;
margin: 0.5em;
}
li.year ul {
font-weight: normal;
list-style-type: disc;
font-size: smaller;
}
</style>
</head>

<body>
<ol>
<li class="year" value="1959">
<ul>
<li>First line of text.</li>
<li>Second line of text.</li>
</ul>

</ol>
</body>
</html>

最佳答案

问题是 Internet Explorer(和 Edge)正在分配 <li class="year">这是自己的线。所以在嵌套 <ul> 之前元素开始,IE/Edge 正在打印一行,实际上是一个换行符。不知道为什么。

为了修复 IE 的这个问题(不影响更好的浏览器),你可以 float <ul>并向 <li class="year"> 添加一个 clearfix hack .我已经指出我的样式来解决以下类 .fixspace 的问题.尝试添加和删除该类以查看 IE 中的差异(请记住该问题仅在 IE/Edge 中可见):

body {
background-color: white;
margin-left: 2%;
margin-right: 2%;
font-family: Helvetica, sans-serif;
line-height:1.2;
max-width:100%;
}

li.year {
font-weight: bold;
border: 1px solid black;
padding: 0.1em;
margin: 0.5em;
}
li.year ul {
font-weight: normal;
list-style-type: disc;
font-size: smaller;
}

/* These are the added styles:
*/
li.fixspace ul {
float: left;
}
li.fixspace:after {
content: '';
display: block;
clear: both;
}
<ol>
<li class="year fixspace">
<ul>
<li title="Item was added or updated in 2016" class="liyear2016">
<a id="bryk-northstar-staff-2011-12" href="bryk-northstar-staff-2011-12.htm">North Star School Staff, 2011-12.</a> Surnames: <span class="bold">Bolen, Braun, Burton, Cain, Cameron, Caul, Dunnet, Evans-Duquette, Fairfield, Ferguson, Fraser, Hawkins, Hayes, Labossiere, Makarenko, Myrberg, Niskanen, Ojala, Riding, Thomas.</span> <span class="redline">(Added February 8, 2016)</span>
</li>
</ul>
</li>
</ol>

关于html - Explorer 与 Firefox 和 Chrome 中的不同列表项对齐方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42289077/

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