Question

我正在开发一个网络应用程序。我们还创建了一些可以描述为内联编辑的东西。只是为了描绘我想要解决的事情，我使用Facebook帖子的例子。

你的帖子就像。

史蒂夫·乔布斯添加了5张新照片

史蒂夫乔布斯是重定向到他的个人资料的链接，所以在HTML中，这将是：

<div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs</a> added 5 new photos.<p>
</div>

但我想要的是整个帖子“块”是可点击的，虽然我只希望这个名字看起来像链接。通常在HTML逻辑中会对此说：

<a href="stevejobs/" title="#"><div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs</a> added 5 new photos.<p>
</div></a>

但这在语义上并不正确。快速查看HTML 4.01或任何其他标准，如下所示：

A元素定义的链接和锚点不能嵌套;一个A. element不得包含任何其他A元素。

除了使用javascript和为整个“div anchor”定义div：hover状态之外，如何创建它在语义上正确？

Answer 1

由于你不想要javascript（这会更容易），这是另一种方法：

<div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs <span style="color:none; text-decoration:none;">added 5 new photos.</span></a></p>
</div>

可以添加任何其他样式效果。例如cursor: none;等取决于您所期望的效果。

Answer 2

HTML：

<div class="post-block">
 <p><a href="stevejobs/" title="#"><span class="author">Steve Jobs</span> <span class="posttext">added 5 new photos.</span></a> <p>
</div>

CSS：

.post-block { margin: 0px; } 
.post-block p { margin: 0px; } 
.post-block p a {display: inline-block; background-color: transparent; width: 100%; min-height: 100px; /* can be varied */ }
.post-block p span.author { display: inline-block; }
.post-block p span.posttext { display: inline-block; }

Answer 3

在HTML5中，a可用作块级元素。

<div class="post-block">
   <a href="stevejobs/"><p>Steve Jobs added 5 new photos.<p></a>
</div>

现在，使用CSS（.post-block a {text-decoration:none;}）删除默认链接样式。

要获取名称的链接样式，请将名称括在元素中并添加类似“name”的类。 b元素在此处是合适的选择（否则使用span）：

<div class="post-block">
   <a href="stevejobs/"><p><b class="name">Steve Jobs</b> added 5 new photos.<p></a>
</div>

现在回归样式：.post-block .name {text-decoration:underline;}。

如果您愿意，可以在元素中包含名称，甚至允许您使用微格式hCard。

Answer 4

多年来我一直有同样的问题，因为我想要保持HTML语义和SEO语义，例如标题标记和段落等，同时仍保持默认锚定行为，例如在浏览器中指示目标URL，保持标签不变并保持默认的锚悬停操作，JavaScript本身并不这样做。

我能想到的最好的解决方案是将一个绝对定位的块级锚点覆盖（覆盖）内容，并使用父元素的悬停操作将任何行为集成到实际内容中，这在语义上是正确的，应该是由所有网络爬虫正确解析，因此：

.post-block {
  position: relative;
}

.post-block p span.anchor {
  text-decoration: underline;
}

.post-block:hover p span.anchor {
  text-decoration: none;
}

.postblock a.overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; /* to be on the safe side */
  text-indent: -9999em;
}

<div class="post-block">
  <p><span class="anchor">Steve Jobs</span> added 5 new photos.<p>
  <a class="overlay" href="stevejobs/" title="#">Steve Jobs</a>
</div>

这适用于块和网格布局，甚至可以很好地使用触摸设备，因为锚本身没有悬停操作 - 某些设备劫持了第一次点击：）

不是100％确定搜索引擎是否会惩罚文本缩进，但是有任何其他解决办法，discussion here可以让所有人感兴趣。

Answer 5

只需在第二个示例中替换“史蒂夫·乔布斯”周围的锚标记，并使用范围并根据需要设置样式：

<a href="stevejobs/" title="#"><div class="post-block">
    <p><span class="post-block-user">Steve Jobs</span> added 5 new photos.<p>
</div></a>

使用CSS：

a {
    cursor: default;
}
.post-block-user {
    font-weight: bold;
    cursor: pointer;
}

或您要申请或不申请的任何款式。实际上，我会尝试丢失div并将类放在锚标记上，除非有其他原因保留该结构。

Answer 6

禁止嵌套锚标记。

如果您只想将名称显示为链接，请使用锚标记。如果您需要整个块可单击，请在jquery中的onclick函数中执行此操作。像

这样的东西

$(.post-block).click(//your function);

语义上正确的嵌套锚点

6 个答案: