Question

我使用模板和HTML + CSS + JS构建了我的网站（实际上是网页）。结果是：

https://vigibos.webs.upv.es/

在Safari（在iOS上）中浏览并打开“阅读器模式”时，我得到一个奇怪的结果：缺少某些部分，并且文本格式错误。

这两个图像显示了Safari如何在iOS 12.3.1上（无和使用“仅限读者”模式）呈现网页：

“仅限读者”版本会丢失网站的大部分内容，并且与标题大小不一致：“建议的博士学位和硕士论文”和“出版物”的大小和方面应相同，因为两者都是“ H3的标题。

我应该在HTML代码中查找哪种类型的问题/错误以解决此问题？

其他“文本”（例如某些Google Chrome扩展程序）可以非常正确地呈现网页。因此，也许在HTML代码中没有错误，并且浏览器错误地解释了HTML代码。 您是否了解其他情况下Safari的“阅读器模式”的这种行为？

Answer 1

在div#main中，似乎每个子标题都在section和div之内。删除这些容器并将内容直接放在div#main下似乎可以解决问题。

section元素代表通用文档或应用程序部分……section元素不是通用容器元素。如果仅出于样式目的或为了方便编写脚本而需要元素，则鼓励作者改用div元素。一般规则是，只有在文档的大纲中明确列出该元素的内容时，section元素才适用。

— http://html5doctor.com/the-section-element

我不会用<section>来包装内容的各个子节，因为在标记方面，标题表明了足够的节和<section>的感觉，并且感觉<section>是与其他语言一起设计的意向。不过，如果您需要包装它们以进行样式设置，则使用<div>感觉更合适，尽管我不确定是否可以在Safari的Reader模式下使用。

原始

<div id="main">

    <!-- \\  About  \\ -->

        <section id="about" class="">
            <div class="container">
                <h3>About &amp; contact</h3>
                <p>…</p>
                <ul class="feature-icons">…</ul>
            </div>
        </section>

    <!-- \\  Positions  \\ -->

        <section id="positions" class="inactive">
            <div class="container">
                <h3>Academic positions</h3>
                <ul>…</ul>
            </div>
        </section>

        …
</div>

新

<div id="main">

    <!-- \\  About  \\ -->

    <h3>About &amp; contact</h3>
    <p>…</p>
    <ul class="feature-icons">…</ul>

    <!-- \\  Positions  \\ -->

    <h3>Academic positions</h3>
    <ul>…</ul>

    …
</div>

Safari读取器模式的奇怪行为

1 个答案:

原始

新

另请参见