div内锚

Question

这不会一直发生。如果无法复制，错误不是错误！

首先，我认为这是我的年轻编程技巧的错误，但在我的两个网站中出现同样的错误，显然是在相同的情况下。

<a style="display:block;" href="link">
 <div>text1</div>
 <div>text2</div>
</a>

有时，在浏览时，其中div的链接呈现奇怪的结果，页面上没有任何理由出现重复的元素，文本在不同的链接之间分配，真是一团糟。

真正的截图：

http://cupacupelor.ro/img/help.jpg
http://www.carbroker.ro/img/help.jpg

有人遇到过这个问题吗？有解决方案吗？我对涉及JavaScript的修复不感兴趣！

Answer 1

我猜你的链接中的div会导致某些浏览器不一致（可能是你在这里播放的CSS）。

“语义”，有效标记是一些流行语。

那么为什么你想要一个<A>标签中的DIV。你可以试试像这样的

<a href="#">
       <span class="divstyle">Text 1</span>
       <span class="divstyle">Text 2</span>
</a>

然后在CSS

.divstyle { 
    display: block; //and other styles etc
 }

Answer 2

在HTML验证程序中检查您的页面。我90％肯定你不能在<div>之类的内联元素中使用<a>元素。即使您已将链接设置为display:block，但仍然不允许这样做，浏览器可能会吐出他们的假人。

您可以做的是使用跨度，将它们设置为阻止：

<style type="text/css">
  .link, .link span { display: block; }
</style>
<a class="link" href="example.com">
 <span>text1</span>
 <span>text2</span>
</a>