H1图像替换的语义标识......没有任何可点击的内容？

Question

我正在编写一个左上角有一个大公司徽标的网站.

因此,我将徽标编码为背景图像,H1中的公司名称,并使用图像替换技术隐藏H1.

但在网站的其他部分导航中没有"主页"链接.该徽标可能是"主页"链接.但由于语义/图像替换技术,没有什么可点击的.

在这个情况下,你会怎么做？在徽标上放置透明的东西是我的第一个想法,但我想听听其他建议.

Answer 1

非常简单 - <a href="/home">Company name</a>在H1元素中放置一个,并将图像替换样式应用于h1#logo a(或使用的任何选择器).您需要添加display:block;样式,以使锚具有正确的行为.

如果您需要更多详细信息,请告诉我们!

额外细节:

好的 - 我通常使用以下HTML和CSS进行图像替换:

HTML:

<h1 id="logo">
    <a href="/home" title="Back to the home page">[Company name]</a>
</h1>

CSS

#logo a {
  display:block;
  width: 200px; /* Or whatever you like */
  height: 0;
  padding-top: 100px; /* The required height */
  text-indent: -999em; /* negative text indent, leaves the box alone, and in ems to scale with text */
  overflow: hidden;
  background: /*whatever you like */;
} 

这是一种"双倍强度" - 高度:0 /填充顶部技术创建一个你需要的尺寸的盒子,但没有任何文本显示空间(背景图像将出现在顶部填充,但文本惯于).对于那些偶尔会出错的浏览器来说,大的负文本缩进只是一种安全问题(旧的webkit曾经存在问题 - 现在不是很多问题).

让我知道你怎样去!