firefox添加奇怪的空间arround伪元素 [英] firefox adds strange space arround Pseudo-elements

问题描述

查看这些照片

JSFiddle 在底部的链接

Take a look at these photos
JSFiddle link at the bottom

firefox：



chrome：

firefox:

chrome:

他们都是从chrome和firefox相同的元素，你可以看到一个从firefox有一些空间围绕它的顶部和左侧，但铬的一个不是
现在，没有边距或任何东西这导致这一点，它在任何其他浏览器除了firefox工作正常。
主要元素的重要样式是

they are both the same element taken from chrome and firefox and as you can see the one from firefox has some space around it's top and left side but the one from chrome doesn't now, There is no margin or anything that's causing this and it works fine in any other browser except for firefox. the important styles for the main element is

float: left; 
height: 30px; 
line-height: 30px; 
margin: 12.5px 0; 

以及Pseudo-element :: beforeought

and for the Pseudo-element ::before

float: left; 
display: block;
content: '\F011'; 
height: 30px;
line-height: 30px;
margin: 0 10px 0 0; 
padding: 0 10px;

和元素的HTML

<button class="like" onclick="item_like()">500</button>

这是JSFiddle的链接
在chrome和firefox中运行它， br />
http://jsfiddle.net/79cEb/5/

我在这里做错了什么？

this is the link of JSFiddle run it in chrome and firefox and see the difference
http://jsfiddle.net/79cEb/5/
what am I doing wrong here?

推荐答案

我建议你指定top： left：0;到你的:: before伪元素。有时，厚脸皮的浏览器需要几个px向上并离开实际位置。 CSS：

I'd recommend you to specify top:0; left: 0; to your ::before pseudo elements. Sometimes cheeky browsers take a few px up and left to the actual position. CSS:

.like:before {
    float: none;
    width: 30px;
    content: "like";
    margin: 0px 10px 0px 0px;
    padding: 0px 5px;
    background-color: #FF7373;
    color: #FFF;
    border-right: 1px solid #CCC;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px 0 0 4px;
}
.like {
    float: none;
    height: 30px;
    border-radius: 4px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
    padding: 0px 10px 0px 0px;
    margin: 12.5px 10px;
    background-color: #000;
    font: 16px/30px arial;
    color: #FFF;
    border: medium none;
    position: relative;
    width: 88px;
    text-align: right;
}

小提琴： http://jsfiddle.net/79cEb/13/

这篇关于firefox添加奇怪的空间arround伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！