Html 类似Facebook的按钮，导致加载时页面跳转

我曾尝试在我的网站上实现类似facebook的按钮，但它会导致加载后的内容跳转。你知道为什么会这样吗

<div class="breadcrumb clearfix">
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="url"><span itemprop="title">Home</span></a></span> 
    <span class="arrow-space">&#62;</span>
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ collection.url }}" title="{{ collection.title | escape }}" itemprop="url"><span itemprop="title">{{ collection.title }}</span></a></span>       

    {% if current_tags %}
      {% for tag in current_tags %}
        <span class="arrow-space">&#62;</span>
        <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/collections/{% if collection.handle != blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}" title="{{ tag | escape }}" itemprop="url"><span itemprop="title">{{ tag }}</span></a></span>       
      {% endfor %}
    {% endif %}

    {% if paginate.pages != 0 %}      
      <span class="arrow-space">&#62;</span> <strong>Page {{ paginate.current_page }} of {{ paginate.pages }}</strong>
    {% endif %}

    <div class="hide-fb">
        <div class="fb-like" data-href="https://facebook.com/festrags" data-layout="standard" data-action="like" data-show-faces="false" data-share="true" data-width="0px">
        </div>
    </div>

  </div>

如果您查看主页（password=“cheaye”） 该按钮不会导致跳转，但会在产品和收藏页面上跳转

---

我尝试添加宽度和高度，但它只是切断了框架，当我使其足够大时，它只是向下推内容。

like按钮正在将iframe加载到页面中，对于所需的视口来说，它太大了。尝试添加以下内容：

.hide-fb
{
    Overflow:hidden;
}

如果这不应该像那样起作用。您还必须添加一定的宽度和高度

要防止列表视图的内容跳转，可以添加以下css：

.breadcrumb .hide-fb { 
    height: 34px; 
    overflow: hidden; 
} 

FB容器的最大高度为34px（在本例中），因此当它加载时，您的容器（.hide FB）将已经具有正确的高度

更新：由于上面的实现切断了fb共享模式，我们只需要防止溢出，直到iframe完全加载

尝试删除包含溢出的.hide fb的每个实现：hidden；然后将此添加到css中：

.hide-fb:empty { 
    height: 34px; 
    overflow: hidden; 
} 

来自fb-like插件的容器不应该被切断

更新3： 这是开始变得愚蠢。。。 我为你的页面创建了一把小提琴，我所做的就是：

.hide-fb {
    height: 34px;
}

---

您的

float:right

也应用于该元素。现在，当我加载页面时，当加载FB时，元素没有跳跃。我还可以使用所有控件，而不必切断它们。可能是德国的Facebook行为不同，或者使用不同的控件。但共享窗口将在新的浏览器弹出窗口中打开。当你点击“喜欢”时，会出现一个对话框，上面写着：“说更多关于这个…”这看起来像是被切断了，但事实并非如此。看起来应该是这样的。

我也有类似的问题。解决方案是强制按钮具有特定尺寸，而不是未设计样式：

.fb-like {
    height: 30px;
    width: 78px;
    overflow: hidden;
    display: inline-block;
}

---

但这意味着“Like”弹出窗口无法出现。我随后的解决方案是添加一个新类

fb like not fixed but

，该类将具有上述修复程序，并设置一个

窗口。setTimeout

，以便在加载like按钮后删除该类。恶心。

谢谢，看起来我需要添加宽度和高度。我已经对我的问题添加了一些注释。仍然无法正常工作。问题是，一旦实现了这一点，当单击“喜欢”按钮时，它无法正确显示iframe…请立即在我的网站上看到它。我明白了。好的，我们可以去一点。尝试使.hide fb容器完全为空，没有空格，没有新行

，然后更改溢出的css，使之：

。hide fb:empty{overflow:hidden；}

值得一试。请查看anwer的编辑。像昨天一样，明天我将用工具来检查它，如果问题持续存在，我不能用开发人员工具进行测试。如果您为iframe的父容器和面包屑项目指定了相同的高度，则like按钮的空间应“保留”，即使按钮尚未加载。

.hide fb

容器是否附加了javascript？如果是这样，那就可以解释“跳跃”。包装容器应使用默认模板加载。如果我错了，我会在明天回到桌面时与您联系如果您添加

.breadcrumb.hide fb{height:34px；overflow:hidden；}

列表视图中的跳跃应该停止。

.fb-like {
    height: 30px;
    width: 78px;
    overflow: hidden;
    display: inline-block;
}