Weird SPAN element rendering in Safari (on iPhone)

Question

Hello,

Whenever there is a SPAN element in HTML content, the mobile version of Safari renders content differently- it seems that font size increases for the whole paragraph. Consider two examples.

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

and

<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>

Second example breaks page structure because font size increases, and thus the content exceeds div's width. Is there any way around this (besides not using SPAN)?

--
thank you, Paul.
iPhone OS 3.1.2

Answer 1

Paul, could you try explicitly setting the font-size for the span to match that of the paragraph tag and see if this solves your issue?

Answer 2

The display of those two HTML fragments look identical to me on iPhone Safari (also iPhone OS 3.1.2).

Is there any CSS being applied to SPAN tags?

[Edit: I see the difference now; you won't see any difference if both examples are on the same page.]

[Added:] By explicitly setting the size, it appears you can get consistent text size between the two. For example:

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

Answer 3

This bug is still happening on iPhone 4.