div内锚

Question

这不会一直发生.如果无法复制,错误不是错误!

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

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

有时,在浏览时,与其中的divs 链接呈现奇怪的情况,页面上出现重复的元素,没有任何理由,文本在不同的链接之间分配,真是一团糟.

真实的截图:

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>