calibre 阅读器中注释无法正常跳转的问题（已解决）

最近下了一本新电子书，在 Calibre 自带的阅读器中阅读时，发现书中的注释无法正常显示，问题描述如下：

一般来说，我们点击某个注释时，正常情况下是弹出一个小窗口，小窗口中显示注释内容，可以通过二次点击跳转到注释所在的正文位置：

calibre-注释窗口弹出

但是我下载的这本新书是直接跳转到了尾注，没有弹出小窗口，想要继续阅读就必须自己手动返回到注释所对应的正文位置，体验非常不好。出于好奇，我上网搜索了相关问题，比如请教epub注释问题 - 吾爱破解 - 52pojie.cn，初步怀疑是尾注的 HTML 代码格式不符合规范导致的。

于是我通过 Calibre 的编辑功能，查看了这本书的 HTML 代码，摘抄如下：

<!-- 正文 -->
<p class="quote">苏莱曼苏丹，蒙真主洪恩，万王之王，众君之君，拜占庭与特拉布宗
    <a class="duokan-footnote" href="#a_4_1" id="c_4_1">
        <img alt="注释1" class="duokan-footnote" src="../Images/note.png"/>
    </a>
    至高无上的皇帝，波斯、阿拉伯、叙利亚与埃及的强大君主，欧洲与亚洲的最高领主，麦加与阿勒颇亲王，耶路撒冷之君，世界之海的统治者，向菲利普·德·李尔·亚当，罗得岛的大团长，谨致敬意。
</p>

<!-- 尾注 -->
<li class="duokan-footnote-item" id="a_4_1">
    <p class="footnote-text">
        <a class="duokan-footnote-link" href="#c_4_1">特拉布宗是从拜占庭帝国分裂出的三个帝国之一，创立于1204年4月，持续了257年。特拉布宗帝国的第一代君主阿列克赛一世是拜占庭帝国科穆宁皇朝最后一位皇帝安德罗尼库斯一世的曾孙，他在第四次十字军东征时预见十字军将攻取君士坦丁堡，便占据特拉布宗独立建国。在地理上，特拉布宗的版图从未超过黑海南岸地区。1461年，奥斯曼帝国苏丹穆罕默德二世消灭了特拉布宗。
        </a>
    </p>
</li>

似乎没有什么问题，注释跳转的功能其实是通过 <a> 标签中的 href 属性来实现的。比如正文中的 href="#a_4_1" 表示跳转到尾注的 id="a_4_1" 的位置。从尾注返回正文也是类似的，尾注中的 <a href="#c_4_1"> 表示跳转到正文中 id="c_4_1" 的位置。

我们可以看一下其他可以正常弹出小窗口的电子书的 HTML 代码，摘抄如下：

第一个例子(数字注释)

<!-- 正文 -->
<p class="kindle-cn-ref">所以说，秩序问题，因此也是社会互动的稳定系统之整合的性质问题，也就是社会结构问题，关键就在于行动者的动机与规范性文化标准的整合，这些文化标准在我们的人际场合中整合着行动系统。用上一章所使用的术语来说，这些标准就是价值取向模式，并就此成为社会系统的文化传统中至关重要的组成部分。<span class="math-super"><a id="noteBack_1" href="part0006.xhtml#note_1">[1]</a></span></p>

<!-- 尾注 -->
<p class="kindle-cn-kai"><a id="note_1" href="part0006.xhtml#noteBack_1">[1]</a>Talcott Parsons, <span class="kindle-cn-italic">The Social System</span>, Glencoe, Illinois, The Free Press, 1951，pp.12，36-37.</p>

第二个例子(图片注释)

<!-- 正文 -->
<a class="duokan-footnote" id="fnref13" name="80683" href="part0005.xhtml#fn13"><img alt="" src="../Images/image00108.jpeg"/></a>

<!-- 尾注 -->
<li class="duokan-footnote-item" id="fn13">
    <p class="fn"><a href="part0005.xhtml#fnref13">[13]</a>&nbsp;罗马第十三区，位于台伯河西岸，梵蒂冈以南。&#8203;
    </p>
</li>

比对之后感觉问题不是出在正文和尾注的 HTML 代码上，可能是 CSS 样式的问题。于是我查看了这本书的 CSS 样式，发现正文和尾注的样式如下：

/* 多看注释 */
img.duokan-footnote {
    width: 0.8em;
}

/* 注释条目*/
li.duokan-footnote-item {
    font-family: "DK-HEITI","微软雅黑","黑体","DK-SONGTI";
    text-align: left;
    font-size: 1em;
    line-height: 1.2;
    padding: 0px;
}

a.duokan-footnote-link {
    color: black!important;
    text-decoration: none;
}

p.footnote-text {
    font-size: 1em;
    font-family: "DK-HEITI","微软雅黑","黑体","DK-SONGTI";
    text-align: left;
    margin: 0;
    line-height: 1.2;
}

ol.duokan-footnote-content {
    padding-top: 1em;
    border-top: #41313f solid 2px;
}

我将其中的 img.duokan-footnote 修改如下：

/* img.duokan-footnote {
    width: 0.8em;
} */
.duokan-footnote img {
   width: 0.8em;
   vertical-align: super;
}

然后惊讶地发现，注释跳转功能恢复正常了！但是仍然很奇怪，修改后的代码和原来的代码看起来并没有什么区别，怀疑在某些阅读器（如 Calibre ）中，CSS 样式的变化可能影响到事件（如点击事件）的触发方式。修改样式后，CSS 改变了图片与父元素的或区域的关系，阅读器可能会根据样式的变化改变事件处理逻辑，具体原因可能需要深入研究 Calibre 的代码才能确定。

额外收获

在研究这个问题的过程中，顺便摘抄了一些好看的 CSS 注释样式，供日后参考：

/* 正文注释 */
a.duokan-footnote {
   line-height: 1;
   text-decoration: none;
   height: auto;
   /* width: 0.8em; */
   border: 0;
}

.duokan-footnote img {
   width: 0.8em;
   vertical-align: super;
}

/* 注释条目*/
ol.duokan-footnote-content {
    list-style: none;
    counter-reset: myCounter;
    margin: 1em 1em 0.5em 1em;
    padding: 0.5em 0;
    clear: both;
    border: 4px #719eb1;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #888888;
    background-color: #bde2ff;
}

ol.duokan-footnote-content li {
  counter-increment: myCounter;
  position: relative;
  padding-left: 30px;
}

ol.duokan-footnote-content li::before {
  content: "[" counter(myCounter) "] ";
  position: absolute;
  left: -40px; /* 向左偏移 */
  top: 0;
}

span.head {
    background-color: #308fd3;
    font-family: "h2";
    color: #ffffff;
    padding: 0.2em;
    text-align: center;
    display: block;
    margin: 0;
}

li.duokan-footnote-item {
   margin: 0 0.6em;
   line-height: 130%;
   text-indent: 2em;
   font-family:"kt","楷体","楷体_gb2312","zw",serif;
   font-size: 0.95em;
   text-align: justify;
   text-decoration: none;
}

p.footnote-text {
    text-indent: 0;
}

a.duokan-footnote-link {
    color: black!important;
    text-decoration: none;
}

<ol class="duokan-footnote-content">
    <span class="head">注释内容</span>
    
    <li class="duokan-footnote-item" id="a_4_1">
      <p class="footnote-text"><a class="duokan-footnote-link" href="#c_4_1">特拉布宗是从拜占庭帝国分裂出的三个帝国之一，创立于1204年4月，持续了257年。特拉布宗帝国的第一代君主阿列克赛一世是拜占庭帝国科穆宁皇朝最后一位皇帝安德罗尼库斯一世的曾孙，他在第四次十字军东征时预见十字军将攻取君士坦丁堡，便占据特拉布宗独立建国。在地理上，特拉布宗的版图从未超过黑海南岸地区。1461年，奥斯曼帝国苏丹穆罕默德二世消灭了特拉布宗。</a></p>
    </li>

    <li class="duokan-footnote-item" id="a_4_2">
      <p class="footnote-text"><a class="duokan-footnote-link" href="#c_4_2">伊斯兰纪年法以公元622年为元年，在这一年，先知穆罕默德带领信众离开麦加，迁移到麦地那，这一事件称为“希吉拉”。伊斯兰纪年法是一种阴历，每年12个月，一共354或355天。</a></p>
    </li>
</ol>

效果如下：

calibre duokan注释样式

Reference

请教epub注释问题 - 吾爱破解 - 52pojie.cn