試圖使用的位置：絕對的Facebook像IE7

我有這個網站：www.canalonesbastimar.com即時通訊設法放置下面的電話號碼在IE7的Facebook按鈕，但我不能..我使用相對位置的容器和爲Facebook按鈕的絕對位置..試圖使用的位置：絕對的Facebook像IE7

<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; 
    } 
    }

UPDATE：

我最後添加的包裝對於像按鈕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>

來源

2013-10-01 ziiweb

可能值得放置你使用的代碼，否則人們不會知道它出錯的地方。巧合的是，我總是發現將Facebook的小工具定位爲一個笨拙的過程。 –

您可能需要爲所有相對定位的父元素設置z-index（ie7 quirk）。從facebook按鈕開始，沿着html結構工作，檢查每個父項目的位置：relative並應用相關的z-index –

@RudiKershaw你是完全正確的，我添加了我的代碼。 – ziiweb

您的.fb-like類的css都不起作用，因爲您已將它放入.tel-fb class 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-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; 
}

值得一提的是您的#tel CSS也是tel-fb類，這意味着CSS可能也不會在裏面工作。

來源

2013-10-01 08:38:07

@謝謝，我忘記說我的代碼對應於一個sass文件，然後sass文件被轉換爲您提到的代碼，應該是這樣的。 – ziiweb

啊，好吧。在這種情況下，我不知道。上面的代碼在我的最後。 –

上面的代碼在IE7中爲你工作？ – ziiweb

試圖使用的位置：絕對的Facebook像IE7

回答

相關問題