1

我为围绕一些文本的框创建了一个漂亮的人造图例：jsfiddle。但是，我的解决方案使用:before和:after伪类，这在 IE 7 和 IE 8 中不起作用。真可惜。

所以我决定开始尝试定义我自己的跨度来代替伪类:before和:after伪类。不幸的是，我的解决方案似乎适用于:before替代品，但不适用于:after替代品：jsfiddle。此外，由于某些莫名其妙的原因，盒子的内容已经向上移动。

是否有可能仅通过 CSS 和 HTML 完成我正在做的事情？我不想将任何 Javascript 或 jQuery 加入其中。

谢谢！

4

1 回答 1

1

http://www.webdevout.net/test?01&raw：

<!doctype html>
<html>
    <头部>
        <标题></标题>
        <风格>
html {
    溢出-y：滚动；
    背景：#ff3366；
    字体：16px 衬线；
}
字段集 {
    边框：3px 实心#ffc2d1；
}
传奇 {
    背景：网址（http://img820.imageshack.us/img820/4242/spritearrowdown.png）无重复3px 50%；
    填充：0 0 0 13px；
}
html > /**/ 正文
legend { /* 如果它在 IE8 中的外观真的让你感到困扰：*/
    位置：相对；
    右：-13px；
}
        </style>
    </head>
    <正文>
        <form action="foo">
            <字段集>
                <legend>模型预测指导</legend>
                字段集
            </fieldset>
        </form>
    </正文>
</html>
于 2012-08-13T21:44:01.527 回答