我觉得这个问题很愚蠢,但我对嵌套的html列表中的字体大小有疑问,我一直无法弄清楚。只有当我在手机上打开网页时才会出现此问题。我使用Chrome for Android,iPad(使用Safari和Chrome)和笔记本电脑在手机上测试了网页。该问题仅出现在手机上。
我有以下代码:
<html>
<head>
<title>Test</title>
<style >
#body-text {
font-size: 15px;
line-height: 1.5em;
max-width: 90%;
margin: auto;
}
#body-text ul {
list-style-type: disc;
}
#body-text ul > li {
list-style-position: outside;
}
#body-text ul > li > ul {
list-style-type: circle;
}
#body-text ul > li > ul > li {
list-style-position: outside;
}
</style>
</head>
<body>
<div id="body-text">
<p style="margin-bottom:5px;">Check this list: </p>
<ul>
<li>This is parent 1 (details 1):
<ul>
<li>This is child 1, long text here (more long text here too).</li>
<li>This is child 2, long text here (more long text here too).</li>
</ul>
</li>
</ul>
<ul>
<li>This is parent 2 (details 2):
<ul>
<li>This is child 3, long text here (more long text here too).</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
对于上面代码中 text 的某些变体,我获得了不同的字体大小。例如,如果我对该行<li>This is child 2, long text here (more long text here too).</li>
发表评论,或者只是将其缩短为例如<li>This is child 2, long text here.</li>
。 {{1}},我得到了预期的字体大小(15)。但是,代码可以提供更大的字体大小。
问题是该列表是具有此行为的网页的唯一部分。网页的其他部分(此处未包含)保留其预期的字体大小。
有关正在发生的事情的任何想法?
答案 0 :(得分:0)
have you tried using css reset?
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on