我工作的一个网络的一个应用。 而我们也创造是可以被描述为行内编辑的东西。 只是为了刻画我试图解决我使用例如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元素必须不包含任何其他的A元素。
如何创建语义正确不要使用Javascript并确定股利其他：悬停状态为全“分区锚”？
既然你不想要的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; 等，这取决于你想要的效果。
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; }
在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;}
要获取名称的链接风格回归，在元素括起来，并添加一个类，如“名”。 所述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，如果你喜欢。
我有好几年了同样的问题，在这我要保持HTML语义和语义搜索引擎优化也如标题标签和段落等，同时仍保持默认锚点的行为，例如，指示浏览器内的目标URL，保持完好的Tab键及收存默认锚悬停动作，其中的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％肯定，如果搜索引擎惩罚的文本缩进，但也有许多附加的变通办法， 在这里讨论让有兴趣的人开始。
只需更换围绕“史蒂夫·乔布斯”的锚标记在同一个跨度和风格是第二个例子，你想：
<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和把类锚标记，除非有其他原因保持该结构。
嵌套锚标记是被禁止的。
如果你想只有名称显示为一个链接使用锚标记。 如果你需要整个块可点击做在的onclick功能的jQuery。 就像是
$(.post-block).click(//your function);
