嵌套html列表中的奇怪字体大小行为(移动)

时间:2017-01-30 02:20:52

标签: html css html-lists

我觉得这个问题很愚蠢,但我对嵌套的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)。但是,代码可以提供更大的字体大小。

问题是该列表是具有此行为的网页的唯一部分。网页的其他部分(此处未包含)保留其预期的字体大小。

有关正在发生的事情的任何想法?

1 个答案:

答案 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

you can read the document here

http://meyerweb.com/eric/tools/css/reset/