firefox 在伪元素周围添加了奇怪的空间答案

【问题标题】：firefox adds strange space arround Pseudo-elementsfirefox 在伪元素周围添加了奇怪的空间
【发布时间】：2014-07-31 15:22:14
【问题描述】：

看看这些照片
JSFiddle底部链接

火狐：

铬：

它们都是来自 chrome 和 firefox 的相同元素，正如您所见，来自 firefox 的元素在其顶部和左侧周围有一些空间，但来自 chrome 的元素没有现在，没有边距或任何导致此问题的原因，它在除 Firefox 之外的任何其他浏览器中都可以正常工作。主要元素的重要样式是

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

对于伪元素 ::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 中运行它，看看有什么不同
http://jsfiddle.net/79cEb/5/
我在这里做错了什么？

【问题讨论】：

Firefox 似乎在按钮内的内容周围添加了一些默认空间。您是否尝试过包含 normalize.css ？这是一个特殊的 css 文件，它试图使浏览器样式保持一致。 necolas.github.io/normalize.css
正如Laurens Kling 评论的那样，一种简单的方法是使用 normalize.css necolas.github.io/normalize.css/<br> 效果很好:) 非常感谢

标签： css firefox pseudo-element

【解决方案1】：

也许尝试使用 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;
}

【讨论】：

这将需要再次添加顶部和底部边框半径，例如 border-top-left-radius:4px;
是的，这会起作用，但它需要编辑我所有的 css，我懒得这样做。但 normalize.css 确实对我有用

【解决方案2】：

我建议你指定 top:0;左：0；到您的 ::before 伪元素。有时厚颜无耻的浏览器会向上移动几个 px 并留在实际位置。 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/

【讨论】：

【解决方案3】：

我为您提供了这个解决方案，它将按钮相对放置，:before 类绝对放置。然后你可以使用top、bottom和left位置，这将是相对于父级的。

请注意，我在按钮上添加了overflow: hidden，因此圆角边框仍然可见。

这是修改后的 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;
}

另外，请参阅updated Fiddle。

【讨论】：