Various explanations of this bug:


Given the following example:

   <span style="text-decoration:underline">
     Outer
     <span style="font-weight:bold;"> Inner </span>
     Outer
   </span>

The underlining should be the same throughout, as it is the
underlining of the outer span that is being applied to the inner span,
and not the inner span that is underlining itself. That is, the inner
span should have *no* effect on the rendering of the underlines.

One way of looking at this is through inline boxes.

The above generates two inline boxes, one for the outer span and one
for the inner span. The inner inline box may overlap the outer inline
box (in this case they are perfectly aligned):

   +-------+========+-------+
   | Hello | Lovely | World |
   +-------+========+-------+

The underlining should be applied *to the outer inline box* only. That
is why, for example, the colour is the same throughout an underlining.

Another way of testing this: if you made the inner span invisible
(using the visibility property), the underlining should remain.

Currently, the problem is that underlining is being applied to
children. It should not.  Underlining should be applied to the inline
box which has "text-decoration" set. It should be drawn a fixed offset
(relative to the font size) from the baseline of that element, without
regard to any of the children.


To explain it another way: We should be applying the *-lining to the
element which has 'text-decoration' set, by drawing a line at a fixed
offset from the baseline (e.g. -0.01em for underline, +0.5em for
strike-out, and +1.0em for overline), and not doing anything special
individually for the children.

So, for example, in the case of the following fragment:

   <span style="text-decoration:overline" id="a">
     Outer
       <span style="font-weight:bold;" id="b"> Inner </span>
     Outer
   </span>

...the element 'a' should render the overline:
    ___________________
     Outer       Outer

...and the element 'b' should merely render its text:

           Inner

...which will result in:
    ___________________
     Outer Inner Outer

Thus the overline above 'Inner' is not any bolder than the rest.

Similarly for if this fragment:

   <span style="text-decoration:overline" id="a">
     Outer
       <span style="vertical-align: 1em;" id="b"> Inner </span>
     Outer
   </span>

...the element 'a' should render the overline:
    ___________________
     Outer       Outer

...and the element 'b' should merely render its text:


           Inner

...which will result in:
    ___________________
     Outer       Outer
           Inner

Thus the overline is not broken where the child has moved.