Question

我正在尝试制作一个CSS：三角形之后的通常方式。但它看起来并不像三角形，请参阅http://jsfiddle.net/lborgman/eX3HL/：

/* triangle after */
#st:after {
    position: relative;
    margin-left: 10px;
    content:"";
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    border-left:4px solid black;
}

#st {
    line-height: 2em;
}

如果我将“position：relative”更改为“position：absolute”，则三角形将变为三角形。但是这在我想要的地方不起作用（因为它在浮点数上）。

我该怎么办？

Answer 1

添加display:inline-block以修复三角形

#st:after {
    position: relative;
    margin-left: 10px;
    content:"";
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    border-left:4px solid black;
    display: inline-block;
}

JS小提琴： http://jsfiddle.net/eX3HL/2/

Answer 2

这是一种与对象的原生显示有关的现象。 display的原生span属性为inline。内联元素的行为类似于纯文本，而块元素的行为更像是图像。

在您的示例中，如果不覆盖span的默认属性，则元素的行为类似于text，因此还有font-size shadow-property设置为inherit。这是一个意外的行为，因为开发人员不能直接看到阴影属性，因此导致很多不清楚。你不必只相信我的话，这是一个证明：http://jsfiddle.net/eX3HL/5/

为什么不是这个CSS：三角形出现后是否正确？

2 个答案: