Html:firefox 中的元素符号列表问题

Question

我有如下所示的带有 css 样式的列表项。

该列表在 Chrome 和 IE 中正确显示。

但在 Firefox (v 43+) 中，我得到的列表具有适当的宽度和高度。

.dropdown-content a {
  color: #2d73a9;
  padding: 12px 8px;
  text-decoration: none;
  display: inline-block;
  text-align: left;
}

.dropdown-content ul li:before {
  content: '\f0c8';
  color: #2d73a9;
  font-size: 4px;
  background-color: #2d73a9;
  margin-right: 5px;
  padding: 0px 2px;
  vertical-align: middle;
}

<div class="dropdown-content">
  <ul class="submenu-cont">
    <li class="sub-menu-links">
      <a href="#">Capacitors</a>
    </li>
    <li class="sub-menu-links">
      <a href="inductors.html">Inductors</a>
    </li>
    <li class="sub-menu-links">
      <a href="#">Resistors</a>
    </li>
  </ul>
</div>

元素符号列表在 firefox 中不是精确的方形列表类型。

我正在尝试为 firefox 添加伪元素，例如:

/*下面的元素似乎没有出现在 inspect 元素中，尤其是在 firefox 浏览器中。 */

如果我检查子菜单链接，我得到“未选择元素”

::-moz-list-bullet {
    content: '\f0c8';
    color: #2d73a9;
    font-size: 4px;
    background-color: #2d73a9;
    margin-right: 5px;
    padding: 0px 2px;
    vertical-align: middle;
}

Answer 1

我相信您正在使用此处设置的超赞字体图标。您只需在此处定义 font-family。

此代码在 Firefox 中为我提供了完美的结果。此外，检查其他必要的图标文件，这些文件需要以正确的路径绑定(bind)到这里。

.dropdown-content ul li::before {
  content: '\f0c8';
  color: #2d73a9;
  font-size: 4px;
  background-color: #2d73a9;
  margin-right: 5px;
  padding: 0px 2px;
  vertical-align: middle;
  font-family: FontAwesome;
}

如果您不使用 font-awesome，list-style-type: square; 就足以实现方形元素符号。此属性将分配给 li，在这种情况下，元素符号不需要 ::before。