2

所以我有一个由我的 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 来工作。

4

3 回答 3

5

由于您在导航栏中执行此操作，因此您应该有一个固定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;
}

工作演示

于 2014-01-17T16:04:17.100 回答
2

在 OP 添加该行之前回答了答案

任何涉及background-image的解决方案都需要我在样式表中指定每个项目width，height我想避免出于这个问题的目的。

因此，如果任何对background-image解决方案感兴趣的人都可以参考这个，否则可以直接跳过。

我不确定我建议的最佳解决方案是什么，但你肯定可以使用background-image每个a元素，使用nth-伪，并将字体设置color为透明，或者使用text-indent属性overflow: hidden;

所以它会像

nav ul li {
   display: inline-block;
}

nav ul li:nth-of-type(1) a {
   background-image: url(#);
   display: block;
   width: /* Whatever */ ;
   color: transparent;
   text-indent: -9999px; /* Optional */
   overflow: hidden;
   font-size: 0; /* Optional, some people are really sarcastic for this */

   /* Below properties will be applicable if you are going for sprite methods */
   background-position: /* Depends */ ;
   background-size: /* If required */ ;
}

我建议你的原因是：-

优点 ：

  • 跨浏览器兼容
  • 你可以精灵方法来减少http请求以请求每个选项卡的图像吗
  • 此外，您不会丢失a标签之间的文本，这对于屏幕阅读器而言非常好。

缺点：

  • width为每个设置自定义

注意：如果您要使用 sprite 解决方案，background-position那么无论如何都是必须使用的属性，因此请务必先查看支持表，然后再选择 sprite 方法。

在此处输入图像描述

学分- 用于支持表

于 2014-01-17T15:36:02.100 回答
0

我会将PNG图像放入img标签中，然后设置alt属性。

<ul>
<li><a href="..." title="Journal"><img src="journal.png" alt="Journal"/></a></li>
<li><a href="..." title="Art"><img src="art.png" alt="Art"/></a></li>
<li><a href="..." title="Work"><img src="work.png" alt="Work"/></a></li>
</ul>
于 2014-01-17T15:51:41.997 回答