如何使用 CSS 内容跨浏览器用图像替换 HTML 文本

Question

所以我有一个由我的 CMS 生成的导航菜单：

菜单的 HTML 很简单（为了清晰起见进行了编辑）：

 <ul>
     <li><a href="...">Journal</a></li>
     <li><a href="...">Art</a></li>
     <li><a href="...">Work</a></li>
   </ul>

我希望项目显示为手写文本，与网站的总体主题保持一致，为每个菜单项使用单独的 PNG 文件。

为此，我使用了 CSScontent属性，如下所示：

#headerNav .nav li a[href="/_site/en/journal/"]  
 { content: url(/path/to/image.png); }

而且效果很好！每个项目的 HTML 文本被正确的图像替换：

但是，唉，后来我了解到并非每个浏览器都支持content除:before和之外的选择器上的 属性:after！Chrome 和 Safari 会这样做，但 Firefox 不会。但是，当我使用时 :before，不会替换 HTML 节点，但会添加图像：

我该如何解决这个问题？

什么不起作用：

• 制作<a>元素也display: none删除了:before部分。
• 制作<a>元素position: absolute并将其移动到其他地方也行不通。
• 使<a>元素width: 0px搞砸了布局，因为通过添加的图像content不在文档流中。

我不想做的事情：

• 当然，我可以手动输出图像，但我想使用 CMS 给我的 HTML，其中<li>包含文本。

• 任何涉及的解决方案background-image都需要我在样式表中指定每个项目的宽度和高度，为了这个问题的目的，我想避免这样做。

• 将笔迹变成字体不是一种选择。

• 使用 JavaScript 来动态替换项目不是一种选择。这需要使用纯 HTML 和 CSS 来工作。

Answer 1

由于您正在导航栏中执行此操作，因此您应该有一个固定height的方法，使下一个方法可以工作：

• 首先content在:before元素上插入图像，并使其display:block推送a下面标签的实际文本。

  li a:before {
     content:url(http://design.jchar.com/font/h_1.gif);
     display:block;
  }
  

• 然后height在你的a标签上用固定的方式隐藏该文本：

  li a{
     height:50px;
     overflow:hidden;
  }
  

该工作演示