css - 链接与其附加到 [中间人] css html 的图像分离

Question

所以我有一个关于图标，上面有一个链接。

<%= link_to image_tag("infobutton_circle_blue.png") ,"http://redbullrecords.com/artist/awolnation/", :id => "about" %>

这将产生这个:

<a id="about" href="http://redbullrecords.com/artist/awolnation/" style="
    height: 40px;
"><img src="/images/infobutton_circle_blue.png"></a>

在我添加任何样式之前，...图像链接出现问题。

但是一旦我添加了一些位置/尺寸样式

        #about 
          img
            float: right
            width: 50px
            padding-right: 45px

            +rhythm(-2.0 , 0, 0, 0)

然后图像不再有链接，..检查员说链接在页面的另一边，大小为 0px x 0px..很奇怪

如果有人遇到过这个问题，很想听听您是如何修复它的，以及我究竟做错了什么

我试图只定位没有 img 的图像 ID，..但它没有让步..所以这就是为什么我使用 #about img

Answer 1

我注意到我希望图标所在的空间在技术上会位于另一个元素之上，..所以我将样式更改为绝对定位并且一切正常，..仍然很奇怪

#about 
  img
    position: absolute
    width: 50px
    padding-right: 45px
    margin-left: 70%

    +rhythm(-2.0 , 0, 0, 0)