这个列表有一个padding: 0; margin-left: 10px. 项目符号工作正常，出现在左边距。但是，当我添加时height: 800px; overflow-y: hidden，项目符号突然消失了。为什么？我看不出有什么理由overflow-y应该影响出现在元素左边距中的任何内容。
在下面的示例中，附加规则适用于 javascript，但这无关紧要（除了说明练习的最终目标）。如果我直接应用它们，也会发生同样的情况。
搜索这个发现我有很多项目符号点消失的例子overflow: hidden，这是可以理解的，但我不明白为什么这些问题适用于overflow-y，我也找不到其他遇到这个问题的人。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test List</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-darkness/jquery-ui.css" type="text/css" media="all">
<style>
.highlights {
margin-left: 10px;
width: 500px;
padding: 0;
}
</style>
<script>
$(document).ready(
function() {
var $h = $('ul.highlights');
if ($h.height() > 800) {
$h.css('overflow-y', 'hidden');
$h.css('height', '800px');
var expand = document.createElement('span');
expand.innerHTML = 'Show all';
$h.after(expand);
$(expand).click(
function() {
$h.hide().css('height', 'auto').slideDown();
$(this).hide();
}
);
}
}
);
</script>
</head>
<body>
<ul class="highlights">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis luctus ex neque, quis lobortis dui efficitur ac.</li>
<li>In ornare iaculis sapien, id faucibus erat vestibulum sit amet.</li>
<li>Suspendisse odio erat, suscipit vel sem et, gravida pretium felis.</li>
<li>Vestibulum finibus ex lacus, sit amet bibendum nunc auctor efficitur.</li>
<li>Donec in diam imperdiet, posuere velit sed, auctor nulla.</li>
<li>Duis at lorem arcu.</li>
<li>Maecenas in velit id magna congue commodo.</li>
<li>Integer congue nunc hendrerit, lobortis ligula at, finibus tortor.</li>
<li>Donec euismod, tellus ut sollicitudin consequat, elit nulla imperdiet dui, eu aliquet odio magna id felis.</li>
<li>In varius a turpis eu ornare.</li>
<li>Proin eu pharetra felis.</li>
<li>Nunc tempus odio lectus, non molestie eros facilisis aliquet.</li>
<li>Aenean magna urna, ultricies ac faucibus sit amet, viverra ut ante.</li>
<li>Proin ornare lacinia nisi vitae aliquam.</li>
<li>Morbi at enim ut erat tempor hendrerit.</li>
<li>Donec suscipit id massa feugiat placerat.</li>
<li>Aliquam luctus maximus lectus, id rutrum ligula tincidunt vel.</li>
<li>Sed vehicula tellus in nunc sagittis vulputate.</li>
<li>Integer bibendum quam sit amet lacinia dignissim.</li>
<li>Etiam ultricies ultricies nibh elementum fermentum.</li>
<li>Ut vitae risus lectus.</li>
<li>Mauris ac convallis sapien, quis euismod arcu.</li>
<li>Vestibulum viverra erat a lacinia molestie.</li>
<li>Fusce et turpis molestie, pretium ex varius, consectetur orci.</li>
<li>Curabitur eu diam in tellus tempus pretium.</li>
<li>In accumsan tortor nec congue placerat.</li>
<li>Duis laoreet rhoncus libero eget posuere.</li>
<li>In lacinia, dolor sed fringilla ultrices, diam eros pulvinar ligula, non maximus enim orci vel diam.</li>
<li>Praesent sollicitudin libero augue, nec pretium mauris luctus id.</li>
<li>Proin id turpis auctor, lacinia nunc et, pretium orci.</li>
<li>Nulla vel eleifend leo, sed fringilla ligula.</li>
<li>Maecenas convallis arcu ac gravida ornare.</li>
<li>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada dui et urna vulputate pharetra.</li>
<li>Maecenas eu dictum orci.</li>
<li>Morbi auctor finibus pretium.</li>
<li>Nam consequat luctus vehicula.</li>
<li>Phasellus eu arcu sed ipsum ultricies mollis.</li>
<li>Etiam at porttitor est.</li>
<li>Nulla pellentesque pretium tempus.</li>
<li>Cras molestie pharetra sem eu iaculis.</li>
<li>Nam consequat, arcu id tincidunt pretium, sem ipsum interdum est, non pellentesque felis eros sit amet lectus.</li>
<li>Nulla laoreet congue elit, non aliquam orci rutrum a.</li>
<li>Aenean fringilla consequat nisi, tempus dictum libero finibus sed.</li>
<li>Suspendisse eget ligula quam.</li>
<li>Nulla in ornare turpis.</li>
<li>Donec sit amet eros at tortor fermentum aliquet.</li>
<li>Etiam semper eleifend ante non vehicula.</li>
<li>Sed id diam erat.</li>
<li>Pellentesque laoreet gravida finibus.</li>
<li>Vivamus maximus ornare mi, ut gravida leo tincidunt vel.</li>
<li>Mauris congue laoreet imperdiet.</li>
<li>In hac habitasse platea dictumst.</li>
</ul>
</body>
</html>