Tweet Button 和 Facebook Like Button 出现在 FF 的菜单栏下方答案

【问题标题】：Tweet Button and Facebook Like Button appearing below menu bar in FFTweet Button 和 Facebook Like Button 出现在 FF 的菜单栏下方
【发布时间】：2010-09-08 16:54:24
【问题描述】：

我的问题是我有一个 z-index 为 100 的菜单栏，以及该栏的两个 z-index 为 1000 的元素（抱歉，在代码中，z-indexes 实际上是更高的数字，但相差一个因子10 ...我意识到这是不好的做法，但我还没有改变它，因为有几部分连接）。在 Firefox 中，tweet 按钮和 facebook 按钮总是出现在菜单栏下方。它在所有其他浏览器中都能完美运行。现场示例在我的Los Angeles Food Truck Map。以下是一些相关代码：

        #tweet_button{
            position:relative;
            left:6px;
            bottom:10px;
            z-index:100000000;
            }
...

    <div id="smoothmenu1">

<b id="tweet_button"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="truxmap">Tweet </a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></b>
            <span id="facebook_buton" style="color:white;"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fla.truxmap.com&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="position:relative; left:10px;top:4px;border:none; overflow:hidden; height:35px; color:white;width:90px;overflow:hidden;z-index:100000000;" allowTransparency="true"></iframe></span>
    </div>

请注意，我使用的是 GWT。我注意到有时，推特按钮的框架上叠加了一个谷歌广告感知广告......我不太确定为什么会发生这种情况，但我认为它可能与解决方案有关。

非常感谢！！

【问题讨论】：

标签： html css firefox cross-browser

【解决方案1】：

<b> 是一个内联元素，不能接收position 或z-index，因此您需要声明display: block; 或将<b> 更改为<div>。我将其更改为Firebug 中的一个div，它运行良好，您只需要使用top 和left 稍微更改定位。

编辑：你已经有了bottom和left，所以调整一下：）

【讨论】：

哦，对了，我把它改成了 b 元素，因为我在使用 div 时遇到了不同的问题。当我在那里插入 div 时，菜单栏并不总是可用于 chrome 中的交互，所以我尝试使用内联元素并且它有效。在这种情况下，有没有办法让 div 或其他更合适的元素工作？
您可以使用 <span> 元素，因为它是内联的，在 CSS 中写入：display: inline-block; 应该会为您解决它:)
感谢您的提示，您的回答帮助我了解了我所困惑的元素的最后一点。但是，在我的网站 la.truxmap.com 的实时版本中实施您的建议时，我仍然遇到同样的问题
根据我在 Chrome 的开发人员工具中看到的内容，您已将其设置为 display: block;，似乎工作正常，请留在那里 :)
对，它一直在 Chrome 中运行，但在 FF 中一直无法正常运行。在 Chrome 开发工具中，我看到它在我检查属性“display:block”的那一刻就中断了。在 Firefox 中，无论我在 Firebug 中进行什么更改，我都无法让它正确显示。