html - Safari阅读器模式的奇怪行为

问题描述

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

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

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

这两张图片显示了 Safari 在 iOS 12.3.1 上是如何呈现网页的，没有和有“仅限阅读器”模式：

“仅限读者”版本遗漏了网站的大部分内容，并且与标题大小不一致：“Advised PhD & Master's thesis”和“Publications”应该是相同的大小和方面，因为两者都是“H3”标题.

为了解决这个问题，我应该在 HTML 代码中寻找什么样的问题/错误？

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

标签： htmlsafari

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

section 元素表示通用文档或应用程序部分……section 元素不是通用容器元素。当一个元素仅用于样式目的或为了方便编写脚本时，鼓励作者使用 div 元素。一般规则是，只有当元素的内容明确地列在文档大纲中时，section 元素才是合适的。

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

我不会用<section>标记来包装我的内容的子部分，因为标题是足够分割的指示，<section>而且感觉就像<section>是用其他意图设计的。如果您需要包装它们以进行样式设置，使用<div>感觉更合适，尽管我不确定这是否适用于 Safari 的阅读器模式。

原来的

<div id="main">

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

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

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

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

        …
</div>

新的

<div id="main">

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

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

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

    <h3>Academic positions</h3>
    <ul>…&lt;/ul>

    …
</div>

html - Safari阅读器模式的奇怪行为

问题描述

解决方案

原来的

新的

也可以看看

推荐阅读