Question

以下是BUG的链接，仅在firefox中显示（chrome即可）。问题在于星星（活动，非活动），并尝试点击一两个无线电。

我有这个css，但它无法正常工作

/* STARS */
.star-icon {
    color: #ddd;
    font-size: 1.4em;
    position: relative;
}
.star-icon.full:before {

    color: #fdb229;
    content: '\2605'; /* Full star in UTF-8 */
    position: absolute;
    left: 0;
}
.star-icon.half:before {

    color: #fdb229;
    content: '\2605'; /* Full star in UTF-8 */
    position: absolute;
    left: 0;
    width: 50%;
    overflow: hidden;
}
@-moz-document url-prefix() { /* Firefox Hack :( */
    .star-icon {
        font-size: 20px;
        line-height: 10px;
    }
}
/* STARS */

Answer 1

将line-height: 10px;更改为line-height: 17px;

@-moz-document url-prefix("") {
.star-icon {
    font-size: 20px;
    line-height: 17px;
}
}

Answer 2

你为什么这样做？字体行高可以在不同的浏览器中被解释为不同。也许这可能会有所帮助：http://yuilibrary.com/yui/docs/cssreset/ 但我建议你用图像做（如果你想使用半星，并确保在任何浏览器中一切正常）。

Answer 3

如前所述，Patryk你不应该使用行高来定位元素。如果我是你，我会浮动具有固定高度和宽度的块元素，然后使用绝对定位集中定位伪元素。

在这种情况下的另一个解决方案是废弃整个@ -moz文档覆盖，只需添加：

width: 1.4em;

我已在Chrome和Firefox中检查过它。我怀疑这个问题是因为span是自然的内联元素而且没有设置宽度。

需要一个用于firefox标记的css hack

3 个答案: