Safari 中奇怪的 SPAN 元素渲染（在 iPhone 上）答案

【问题标题】：Weird SPAN element rendering in Safari (on iPhone)Safari 中奇怪的 SPAN 元素渲染（在 iPhone 上）
【发布时间】：2009-10-12 19:13:13
【问题描述】：

只要 HTML 内容中有 SPAN 元素，移动版 Safari 就会以不同的方式呈现内容 - 似乎整个段落的字体大小都会增加。考虑两个例子。

<div style="border: 1px solid red; width:500px;">
<p>This is a paragraph. This is a paragraph. This is a paragraph.</p>
</div>

和

<div style="border: 1px solid red; width:500px;">
<p>This is a <span>paragraph</span>. This is a paragraph. This is a paragraph.</p>
</div>

第二个例子破坏了页面结构，因为字体大小增加，因此内容超出了 div 的宽度。有没有办法解决这个问题（除了不使用 SPAN）？

iPhone 操作系统 3.1.2

【问题讨论】：

【解决方案1】：

尝试将-webkit-text-size-adjust: none; 添加到 CSS 和 iPhone safari 应该停止使 span 字体大小看起来不同。

【讨论】：

【解决方案2】：

这两个 HTML 片段在 iPhone Safari（也是 iPhone OS 3.1.2）上的显示看起来与我相同。

是否有任何 CSS 应用于 SPAN 标签？

[编辑：我现在看到了不同；如果两个示例都在同一页面上，您不会看到任何区别。]

[添加：] 通过显式设置大小，您似乎可以在两者之间获得一致的文本大小。例如：

<style type="text/css">
  div, p, span {
    font-size: 24px;
  }
</style>

【讨论】：

不，根本没有 CSS。看这两个链接：eparks.lv/stackoverflow/span.html eparks.lv/stackoverflow/nospan.html
我肯定看到了他的问题。有了跨度，整个段落的字体看起来更大了。
好的，这两个链接的显示方式不同。我创建了一个包含两个示例的页面，它们看起来相同。
设置跨度大小确实可以解决问题，但我认为这是渲染中的错误..

【解决方案3】：

Paul，您能否尝试明确设置 span 的字体大小以匹配段落标签的字体大小，看看这是否解决了您的问题？

【讨论】：