Html 尝试使用position:absolute作为Facebook，就像IE7一样_Html_Css

Html 尝试使用position:absolute作为Facebook，就像IE7一样

html css

Html 尝试使用position:absolute作为Facebook，就像IE7一样,html,css,Html,Css,我有一个网站：我试图在IE7中把facebook按钮放在电话号码下面，但我做不到。。Im使用容器的相对位置和facebook按钮的绝对位置 <div class="tel-fb"> <div class="telicon my-icons-telicon" style="float: left"></div> <div id="tel" itemscope itemtype="http://schema.org/HomeAndConstr

我有一个网站：我试图在IE7中把facebook按钮放在电话号码下面，但我做不到。。Im使用容器的相对位置和facebook按钮的绝对位置

<div class="tel-fb">
    <div class="telicon my-icons-telicon" style="float: left"></div>
    <div id="tel" itemscope itemtype="http://schema.org/HomeAndConstructionBusiness">
      <div itemprop="telephone" class="telephone">
        <a href="tel:+622585749">622 585 749</a>
      </div>
      <div itemprop="telephone" class="telephone">
        <a href="tel:+636740393">636 740 393</a>
      </div>
    </div>
    <div class="fb-like" data-href="http://www.facebook.com/canalonesbastimar" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
</div>


  .tel-fb {
    float: right;
    display: inline-block;
    position: relative;
    z-index: 99;
    #tel {
      float: right;
      a {
        font-size: 29px;
        color: #009846;
        font-weight: bold;
      }
    }
    .fb-like {
      position: absolute;
      top: 250px;
      right: 3px;
    }
  }


.电话：fb{
浮动：对；
显示：内联块；
位置：相对位置；
z指数：99；
#电话{
浮动：对；
a{
字体大小：29px；
颜色：#009846；
字体大小：粗体；
}
}
.fb-like{
位置：绝对位置；
顶部：250px；
右：3px；
}
}

更新：

最后，我为类似facebook的按钮添加了一个包装：

<head>
<style type="text/css">
.tel-fb {
  float: right;
  display: inline-block;
  position: relative;
  z-index: 99;
}

#tel {
  float: right;
}

#tel a {
  font-size: 29px;
  color: #009846;
  font-weight: bold;
}

.wrapper {
  position: absolute;
  top: 50px;
}
.jander {
  background: red;
}
.zero {
    margin-left: 50px;
  position: relative;
  background: red;
  width: 100px;
  height: 100px;
}
.one {
  position: absolute;
  top:50px;
}
</style>
</head>
<body>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1&appId=151887748332358";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="zero">

    <div class="wrapper">
      <div class="fb-like" data-href="http://www.facebook.com/canalonesbastimar" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
</div>
<div class="one">jfklas</div>
</div>
    <div class="tel-fb">
      <div class="telicon my-icons-telicon" style="float: left"></div>
      <div id="tel" itemscope itemtype="http://schema.org/HomeAndConstructionBusiness">
        <div itemprop="telephone" class="telephone">
          <a href="tel:+622585749">622 585 749</a>
        </div>
        <div itemprop="telephone" class="telephone">
          <a href="tel:+636740393">636 740 393</a>
        </div>
      </div>
    </div>
</body>


.电话：fb{
浮动：对；
显示：内联块；
位置：相对位置；
z指数：99；
}
#电话{
浮动：对；
}
#电话a{
字体大小：29px；
颜色：#009846；
字体大小：粗体；
}
.包装纸{
位置：绝对位置；
顶部：50px；
}
詹德先生{
背景：红色；
}
.零{
左边距：50像素；
位置：相对位置；
背景：红色；
宽度：100px；
高度：100px；
}
.一{
位置：绝对位置；
顶部：50px；
}
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/es_es/all.js#xfbml=1&appId=151887748332358”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
肯尼迪机场

您的

.fb like

类的css都不起作用，因为您已将其放在

.tel fb

类css的括号内

所以这个,

.tel-fb {
    float: right;
    display: inline-block;
    position: relative;
    z-index: 99;
    #tel {
      float: right;
      a {
        font-size: 29px;
        color: #009846;
        font-weight: bold;
      }
    }
    .fb-like {
      position: absolute;
      top: 250px;
      right: 3px;
    }
  }  // <--- Notice bracket here putting .fb-like and #tel inside .tel-fb

值得注意的是，您的

#tel

css也在

tel fb

类中，这意味着css可能也不起作用。

可能值得将您使用的代码放在上面，否则人们就不知道它出了什么问题。巧合的是，我总是发现定位facebook的小部件是一个笨拙的过程。你可能需要在所有相对定位的父元素上设置z索引（ie7怪癖）。从facebook按钮开始，沿着html结构向上移动，检查每个父项的位置：relative并应用一个相关的z-index@RudiKershaw你完全正确，我添加了我的代码。@DaveHaigh谢谢，我已将z索引添加到父级，但仍然不起作用，请检查我问题中的代码，也许我把它放错地方了。。没有更多的父母拥有相对的财产。我能想到的唯一一件事就是给类.fb的css添加一个高度和宽度。我不知道facebook是如何给它一个大小的。@谢谢，我忘了说我的代码对应于一个sass文件，然后sass文件被转换成你提到的应该是这样的代码。啊，好的。在这种情况下，我不知道。以上代码对我有效。是的。除了我测试它作为一个脱机文件，所以我看不到实际的按钮。我只是用文本和背景色来标记div的位置，div本身运行良好。我最终解决了使用FB按钮包装的问题，看看更新的问题

.tel-fb {
  float: right;
  display: inline-block;
  position: relative;
  z-index: 99;        
}

#tel {
  float: right;
}

#tel a {
  font-size: 29px;
  color: #009846;
  font-weight: bold;
}

.fb-like {
  position: absolute;
  top: 250px;
  right: 3px;
}