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/

Answer 2

我摆脱了绝对，并使用了保证金进行定位。这有一个额外的好处，黑暗的背景延伸到＆＃34;登录＆＃34;和＆＃34;菜单＆＃34;鼠标悬停。更新的小提琴是here

css看起来像这样：

#main-menu i:after {
   content: "Menu";
   margin-left: 5px;
   top: 12px;
   font-family: 'Helvetica Neue', Helvetica, sans-serif;
   font-size: 12px;  
   text-transform: uppercase;
}

登录相同。

编辑 - 更新了小提琴here

Firefox CSS Content属性不按预期运行

2 个答案: