1

私はこのようなことを達成する必要があります:

<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 と Retina ディスプレイにとって重要なので、テキストにする必要があります。

:( :(

4

1 に答える 1

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/

于 2012-07-13T07:50:38.947 に答える