Css 带下拉盖的Buggy边距和一些电子书阅读器

我有以下代码在电子书中生成首字母大写：

<p class="noindent">
  <span class="lettrine">
    <span class="lettrine-letter">D</span>
  </span>
  <span class="lettrine-line">ésirant</span> développer une relation intime avec Abram, …
</p>

在web浏览器和readium中，下拉框看起来不错（Firefox 14的屏幕截图）：

在其他一些阅读器（calibre的

电子书查看器

，Aldiko）中，下降上限太低（Aldiko 2.1.0的屏幕截图）：

---

什么能解释这种差异？我怎样才能避免呢？

我也看到了这一点。文件错误。有一种正确的方式来呈现HTML/CSS，假设您没有使用CSS 2定义之外的任何CSS属性（而且您似乎没有）。如果EPUB阅读器的呈现方式不同于浏览器，那么这是阅读器中的一个bug，需要修复（当然，除非它是一个基本阅读器，忽略了CSS规范的大部分内容，但这些阅读器通常也忽略了下拉上限）

因为EPUB格式不允许JavaScript（除非您正在构建EPUB 3内容），所以我非常确定，没有任何方法可以有效地解决此类问题，而不会在阅读器供应商修复其bug时中断。最好的办法是归档错误，并希望制作阅读器的公司能够及时修复错误

顺便提一下，我对Calibre提出了一个bug，他们说这是WebKit的问题。我不认为当前版本的QTWebKit存在问题，所以希望每当Calibre选择QT5（在最终版本之后，目前计划在2012年底发布）和与之匹配的更新版本的WebKit时，这个问题就会消失

假设Aldiko也基于QTWebKit，同样的情况可能也适用于该阅读器

.lettrine {
    float: left;
    line-height: 0.7;
    margin-bottom: -1em;
    margin-left: -0.1em;
    margin-right: 0.2em
    }
.lettrine-letter {
    color: gray;
    font-size: 4em;
    font-style: normal
    }
.lettrine-line {
    font-family: "EB Garamond SC", serif;
    font-variant: small-caps
    }