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