css - anchor 标记内的多个 float / block /div

Question

我需要实现这样的目标:

<a style="display:block;" href="#">
  <div style="float:left;display:block;">Left</div>
  <div>
    <div style="display:block;">Right</div>
    <div style="display:block;">Right Bottom</div>
  </div>
</a>

基本上是一个有 2 列的按钮，右边的列有 2 行。

它在具有内联/ block 支持的现代浏览器中正确显示，但在 IE6 和 IE7 中，每当我将鼠标悬停在左侧 div(带有 float )时，它都会显示为“选择”文本图标而不是手形图标(我相信一旦 float ， block 将被取消并显示为内联)。有什么方法可以在不使用整个图像的情况下实现这一目标？我需要它是文本，因为它对 SEO 和视网膜显示很重要。

:(:(

Answer 1

<a href="http://www.google.com/" target="_blank" style="display:block; overflow: hidden" href="#">
  <div style="float:left; width:150px;">Left</div>

  <div style="float:right; width:150px;">
    <div style="display:block;">Right</div>
    <div style="display:block;">Right Bottom</div>
  </div>

  <div style="clear: both;"></div><!-- This will clear the floats for IE -->
</a>

为了避免文本光标添加这个 CSS -

a div{cursor: pointer;}

演示 - http://jsfiddle.net/ZhKmr/4/