我遇到了这个
thread中描述的相同问题.我想知道是否有其他方法可以实现相同的结果并避免这个问题.
显然,即使将anchor标记的显示CSS属性设置为“block”,Firefox也会出现包含块元素的锚标记的问题.我想要实现的效果是拥有一个完整的块可点击而不是块中的文本.它还允许将悬停状态应用于整个块而不是链接部分.
任何人都可以建议一种技术
编辑:
这是我打算展示的:
<div class="entry "> <a class="link" href="/topics/34/steroids"> <h2>Some Text</h2> <div class="info"> <div class="tag-visualization"> <div style="width: 67%;" class="guage"></div> </div> <ul class="stats"> <li> <strong>0</strong><br>FOLLOWERS </li> <li> <strong>2</strong><br>ANSWERS </li> <li> <strong>2</strong><br>QUESTIONS </li> </ul> </div> </a> </div>
这是firefox呈现的内容:
<div class="entry "> <a class="link" href="/topics/45/diet"> </a><h2><a _moz-rs-heading="" class="link" href="/topi/45/diet">sometext</a></h2> <a class="link" href="/topics/45/diet"> </a><div class="info"> <a class="link" href="/topics/45/diet"> </a><div class="tag-visualization"> <a class="link" href="/topics/45/diet"> </a><div style="width: 67%;" class="guage"></div> <a class="link" href="/topics/45/diet"> </a></div> <a class="link" href="/topics/45/diet"> </a><ul class="stats"> <a class="link" href="/topics/45/diet"> </a><li> <a class="link" href="/topics/45/diet"> <strong>0</strong><br>FOLLOWERS </a></li> <a class="link" href="/topics/45/diet"> </a><li> <a class="link" href="/topics/45/diet"> <strong>2</strong><br>ANSWERS </a></li> <a class="link" href="/topics/45/diet"> </a><li> <a class="link" href="/topics/45/diet"> <strong>2</strong><br>QUESTIONS </a></li> <a class="link" href="/topics/45/diet"> </a></ul> <a class="link" href="/topics/45/diet"> </a></div> <a class="link" href="/topics/45/diet"> </a> </div>
解决方法
当我通常需要一个< div>在< a>内,我使用< span>而不是display:block;.不会破坏Firefox中具有上述错误的布局,并且行为与< div>完全相同确实.