css - 锚标签内的多个浮动/块/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 行。

它在具有内联/块支持的现代浏览器中正确显示，但在 IE6 和 IE7 中，每当我将鼠标悬停在左侧 div（带有浮动）时，它都会显示为“选择”文本图标而不是手形图标（我相信一旦浮动，块将被取消并显示为内联）。有什么方法可以在不使用整个图像的情况下实现这一目标？我需要它是文本，因为它对 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/