Question

看看这些照片底部的 JSFiddle 链接

火狐：
enter image description here
铬：

它们都是从chrome和firefox中获取的相同元素，你可以看到firefox中的那个元素在它的顶部和左侧有一些空间但是来自chrome的那个没有现在，没有任何边缘或任何导致这种情况的东西，除了firefox之外，它在任何其他浏览器中都能正常工作。主要元素的重要风格是

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

和伪元素::之前的

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/
我在这做错了什么？

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

Answer 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/

Answer 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。

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

3 个答案: