^{在带有文本修饰下划线}的元素中给出下划线

Question

尝试使用自定义样式调整sup标记但在浏览器中检查时会中断。当前代码在小提琴中共享http://jsfiddle.net/UXSree/FhVm5/10/适用于firefox和IE，但是当涉及webkit浏览器时，它会失败。有人遇到过这个吗？

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

    }

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

    

这是一个多行标题 ^{with superscript} 这里是多行标题的第二部分 ^2nd

  

Answer 1

嘿，这是一个完美的解决方案

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

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

演示：http://jsfiddle.net/gzQa6/1/

Answer 2

获得了精心调整的解决方案...... http://jsfiddle.net/UXSree/M5WwA/

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

Answer 3

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

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

以上不是理想的解决方案，但确实有效。