html – 如何将锚标记编码为块元素以包含其他块元素

前端之家收集整理的这篇文章主要介绍了html – 如何将锚标记编码为块元素以包含其他块元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我遇到了这个 thread中描述的相同问题.我想知道是否有其他方法可以实现相同的结果并避免这个问题.

显然,即使将anchor标记显示CSS属性设置为“block”,Firefox也会出现包含块元素的锚标记的问题.我想要实现的效果是拥有一个完整的块可点击而不是块中的文本.它还允许将悬停状态应用于整个块而不是链接部分.

任何人都可以建议一种技术

编辑:

这是我打算展示的:

  1. <div class="entry ">
  2. <a class="link" href="/topics/34/steroids">
  3. <h2>Some Text</h2>
  4. <div class="info">
  5. <div class="tag-visualization">
  6. <div style="width: 67%;" class="guage"></div>
  7. </div>
  8. <ul class="stats">
  9. <li>
  10. <strong>0</strong><br>FOLLOWERS
  11. </li>
  12. <li>
  13. <strong>2</strong><br>ANSWERS
  14. </li>
  15. <li>
  16. <strong>2</strong><br>QUESTIONS
  17. </li>
  18. </ul>
  19. </div>
  20. </a>
  21. </div>

这是firefox呈现的内容

  1. <div class="entry ">
  2. <a class="link" href="/topics/45/diet">
  3. </a><h2><a _moz-rs-heading="" class="link" href="/topi/45/diet">sometext</a></h2>
  4. <a class="link" href="/topics/45/diet"> </a><div class="info">
  5. <a class="link" href="/topics/45/diet">
  6. </a><div class="tag-visualization">
  7. <a class="link" href="/topics/45/diet"> </a><div style="width: 67%;" class="guage"></div>
  8. <a class="link" href="/topics/45/diet"> </a></div>
  9. <a class="link" href="/topics/45/diet"> </a><ul class="stats">
  10. <a class="link" href="/topics/45/diet"> </a><li>
  11. <a class="link" href="/topics/45/diet"> <strong>0</strong><br>FOLLOWERS
  12. </a></li>
  13. <a class="link" href="/topics/45/diet"> </a><li>
  14. <a class="link" href="/topics/45/diet"> <strong>2</strong><br>ANSWERS
  15. </a></li>
  16. <a class="link" href="/topics/45/diet"> </a><li>
  17. <a class="link" href="/topics/45/diet"> <strong>2</strong><br>QUESTIONS
  18. </a></li>
  19. <a class="link" href="/topics/45/diet"> </a></ul>
  20. <a class="link" href="/topics/45/diet"> </a></div>
  21. <a class="link" href="/topics/45/diet"> </a>
  22. </div>

解决方法

当我通常需要一个< div>在< a>内,我使用< span>而不是display:block;.不会破坏Firefox中具有上述错误的布局,并且行为与< div>完全相同确实.

猜你在找的HTML相关文章