html - Firefox CSS 内容属性未按预期运行

Question

我是绝对定位:在导航栏中与菜单按钮关联的内容之后。

<div class="navbar-left nav-btn" id="user-login">
  <button type="button" id="login-btn" class="navbar-toggle" data-toggle="collapse">
    <i class="fa fa-user"></i>
  </button> 
</div>

#user-login i:after {
  content: "Login";
  position: absolute;
  right: -35px;
  top: 12px;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
} 

出于某种原因，由于绝对定位，Firefox 忽略了内容字符串的超链接属性。 Chrome 和 Safari 似乎可以很好地处理这个问题。关于如何在所有浏览器中保持我的定位和链接属性一致的想法？

这是带有导航栏的 JSFiddle。

http://jsfiddle.net/Hr9ZL/

Answer 1

而不是使用以下附加词“登录”和“菜单”

content: "Login";
content: "Menu";

从 CSS 代码中删除它们并使用以下 HTML 标记:

<button type="button" id="login-btn" class="navbar-toggle" data-toggle="collapse">
    <i class="fa fa-user"></i> LOGIN
</button>

<button type="button" id="menu-btn" class="navbar-toggle" data-toggle="collapse">
    MENU <i class="fa fa-bars"></i>
</button>

这里有一个 JSFiddle 给你看:http://jsfiddle.net/vkEb6/