链接与附加到 [middleman] css html 的图像分离答案

【问题标题】：Link separates from image its attached to [middleman] css html链接与附加到 [middleman] css html 的图像分离
【发布时间】：2015-07-15 02:18:31
【问题描述】：

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

<%= 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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：