firefox adds strange space arround Pseudo-elements

问题

Take a look at these photos
JSFiddle link at the bottom

firefox:

chrome:

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;

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;

and the HTML for the element

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

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?

回答1:

Maybe try positioning the like absolutely using CSS

.like{
float: left; 
height: 30px; 
margin: 12.5px 0; 
background-color: #FAFAFA; 
border-radius: 4px; 
position:relative;
padding: 0 10px 0 40px; 
margin: 12.5px 10px; 
background-color: #000; 
font: 16px/30px arial; 
color: #FFF; 
border:none;}

.like::before{
position:absolute; top:0; left:0; 
width:30px; 
content: 'like'; 
margin: 0 10px 0 0; 
padding: 0 5px;
background-color: #FF7373; 
color: #FFF; 
border-right: 1px solid #CCC; display:block; border:0;
}

回答2:

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;
}

Fiddle: http://jsfiddle.net/79cEb/13/

回答3:

I made you this solution, it places the button relative and the :before class absolute. Then you can use the top, bottom and left position, which will be relative to parent.

Note that I added a overflow: hidden to the button, so the rounded borders are still visible.

This is the altered CSS:

.like {
    float: left;
    height: 30px;
    margin: 12.5px 0;
    background-color: #FAFAFA;
    border-radius: 4px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    padding: 0 10px 0 40px;
    overflow:hidden;
    margin: 12.5px 10px;
    background-color: #000;
    font: 16px/30px arial;
    color: #FFF;
    border:none;
    position: relative;
}
.like::before {
    float: left;
    width:30px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    content:'\F011';
    background-color: #FF7373;
    color: #FFF;
    border-right: 1px solid #CCC;
}

Also, see the updated Fiddle.

来源：https://stackoverflow.com/questions/25062858/firefox-adds-strange-space-arround-pseudo-elements

标签

css

firefox

pseudo-element