iOS TextView中<ul>/<ol>的CSS内边距样式不生效求解决方案

嘿，我之前也碰到过iOS里HTML列表样式不生效的坑，咱们一步步来搞定它！

问题根源 #

iOS用WebKit内核解析HTML生成富文本时，会给<ul>/<ol>这类列表元素套上默认的user agent样式（比如默认的margin-left和padding-left），你的自定义CSS优先级不够，所以被覆盖了。单纯设置padding-left根本没用，得连默认的外边距一起重置。

可行CSS解决方案 #

直接强化你的CSS规则，同时重置margin和padding，再用!important强制覆盖默认样式（或者用更具体的选择器，不过!important在这个场景下最直接）。下面是调整后的完整CSS：

body {
    font-size: 14px;
    font-family: -apple-system, Arial, sans-serif;
    color: black;
    margin: 0; /* 重置body默认边距，避免额外留白 */
    padding: 0;
    line-height: 20px;
}

/* 重置所有层级列表的默认样式 */
ul, ol {
    margin-left: 0 !important; /* 干掉默认外边距 */
    padding-left: 15px !important; /* 你需要的左侧内边距 */
}

/* 自定义列表标记样式，保证和你需求一致 */
ul {
    list-style-type: disc !important;
}
ol {
    list-style-type: decimal !important;
}

/* 嵌套列表单独调整，保持层级感 */
ul ul, ol ol {
    padding-left: 20px !important; /* 嵌套列表内边距稍大一点 */
}
ul ul {
    list-style-type: circle !important;
}

调整后的完整HTML代码 #

把上面的CSS替换到你的HTML里，再加上一个viewport meta标签（让iOS渲染更规范）：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        body {
            font-size: 14px;
            font-family: -apple-system, Arial, sans-serif;
            color: black;
            margin: 0;
            padding: 0;
            line-height: 20px;
        }
        ul, ol {
            margin-left: 0 !important;
            padding-left: 15px !important;
        }
        ul {
            list-style-type: disc !important;
        }
        ol {
            list-style-type: decimal !important;
        }
        ul ul, ol ol {
            padding-left: 20px !important;
        }
        ul ul {
            list-style-type: circle !important;
        }
    </style>
</head>
<body>
    <p>Professionals are often vastly more comfortable solving analytical, convergent problems than those requiring more divergent thinking. In this article, Olivier Leclerc and Mihnea Moldoveanu share some strategies for stimulating truly novel thinking. They introduce five "flexons," which can be thought of as "languages" for shaping problems that help you bring diverse perspectives to problem solving:</p>
    <ul type="disc">
        <li>Networks</li>
        <li>Evolutionary</li>
    </ul>
    <ol>
        <li>Decision-agent</li>
        <li>System dynamics</li>
        <li>Information-processing :
            <ol>
                <li>Decision-agent</li>
                <li>System dynamics</li>
                <li>Information-processing</li>
            </ol>
        </li>
    </ol>
    <ul type="disc">
        <li>Networks :
            <ul>
                <li type="circle">Decision-agent</li>
                <li type="circle">System dynamics</li>
            </ul>
        </li>
    </ul>
</body>
</html>

额外优化：Swift代码调整 #

你生成NSAttributedString时用了unicode编码，建议改成utf8（HTML标准编码），避免潜在的CSS解析异常：

guard let data = styled.data(using: .utf8) else { return nil }

原理说明 #

iOS WebKit给列表的默认样式大概是margin-left: 16px左右，你的自定义CSS没加!important的话，优先级干不过默认样式。同时重置margin-left:0，再设置你要的padding-left，就能精准控制列表的左侧留白了。

内容的提问来源于stack exchange，提问作者Zubair