Firefox中使用：after和float:在yui purecss按钮的右侧出现奇怪的行为_Css_Yui Pure Css

Firefox中使用：after和float:在yui purecss按钮的右侧出现奇怪的行为

css

Firefox中使用：after和float:在yui purecss按钮的右侧出现奇怪的行为,css,yui-pure-css,Css,Yui Pure Css,JsFiddle： HTML: 您可以看到，在Chrome、IE甚至Safari中，按钮的显示与预期一致。箭头显示在按钮文本的右侧。但是，Firefox在按钮文本和：after元素之间插入了一个分隔符。有什么想法吗？（这是我第一次提交堆栈溢出，如果我忘记包含任何信息，请告诉我。）删除float:right并将display:inline block添加到。纯按钮：在之后 Fiddle:我试过了，但它在按钮文本的行高和箭头行高之间引入了一个奇怪的偏移。我无法让他们匹配。我尝试过调整：after元素

JsFiddle：

HTML:

您可以看到，在Chrome、IE甚至Safari中，按钮的显示与预期一致。箭头显示在按钮文本的右侧。但是，Firefox在按钮文本和：after元素之间插入了一个分隔符。有什么想法吗？（这是我第一次提交堆栈溢出，如果我忘记包含任何信息，请告诉我。）

删除

float:right

并将

display:inline block

添加到

。纯按钮：在之后
Fiddle:我试过了，但它在按钮文本的行高和箭头行高之间引入了一个奇怪的偏移。我无法让他们匹配。我尝试过调整：after元素的行高，但它同时影响按钮文本和伪元素。那个箭头只需要向下移动2-3倍。我通过在：after元素中添加垂直对齐：middle来解决这个问题。我使用的字体（League Gothic）有一个很高的基线来容纳逗号，所以我最后添加了一点填充。pure按钮然后重新调整：after元素，边距：-3px；它摸起来很脏，但我想它起作用了。
<html lang="en">
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
</head>
<body >
      <a class="pure-button" href="#"><span>BUTTON</span></a><a class="pure-button" href="#">Button Text</a><a class="pure-button" href="#">Another Button</a>
</body>
</html>

.pure-button {
   font-family: League Gothic;
   font-size: 18px;
   padding: 0 12px;
   color: #fff;
   border: 2px solid #fff;
   background-color: #203920;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 2px;
   border-radius: 0;
   margin-top:40px;
   margin-top:2rem;
   line-height: 51px;
   height:51px;
}
.pure-button:after {
   content: "\00BB";
   font-size:34px;
   font-family:Georgia, Times, "Times New Roman", Serif;
   display:block;
   float:right;
   line-height:47px;
   height: 47px;
   border-left: 2px solid #fff;
   margin-left: 17px;
   padding-left: 12px;
 }