<sup> taking underline in chrome when given inside an element with text-decoration underline

Question

tried adjusting the sup tag with custom styling but it breaks when checked across the browsers. The current code shared http://jsfiddle.net/UXSree/FhVm5/10/ in the fiddle works for firefox and IE but when it comes to webkit browsers it fails. Has anyone come across this?

        h1{
    text-decoration:underline;
    width:450px;

    }

    sup{
    color:red;
    font-size: 30%;
    }

This is a multiline heading^{with superscript}And here comes the second part of multiline heading^2nd

Answer 1

got the fine tuned solution... http://jsfiddle.net/UXSree/M5WwA/

h1{ border-bottom: 1px solid #999; display: inline; } div{width:200px;border:1px solid red;}

Answer 2

Hey here is a perfect solution

h1 {
        text-decoration:underline;
        width:450px;
       display: inline;
    }

    sup {
        color:red;
        font-size: 30%;
        vertical-align: top;
    }

Demo: http://jsfiddle.net/gzQa6/1/

Answer 3

   h1 {
        text-decoration:underline;
        width:450px;
       display: inline;
    }

    sup {
        color:red;
        font-size: 30%;
        text-decoration:none; display: inline-block;
    }

The above is not an ideal solution, but it does work.