html - 如何使用 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 文件。

为此，我使用了 CSS content像这样的属性:

#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;
  }
  

• 然后在您的 a 标签上用固定的 height 隐藏该文本:

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

Working Demo