html - Facebook 点赞按钮导致页面在加载时跳转

Question

我已经尝试在我的网站上实现类似 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>

这是 css(希望我已经挑出了相关部分..)

.clearfix:after, .row:after { clear:both; }
.clearfix, .row { zoom:1; }

.breadcrumb { font-size: 12px; margin: 0 0 30px 0; }
.breadcrumb .arrow-space { margin: -2px 6px 0; font-size: 10px; opacity: .5; filter:alpha(opacity=50); }
.breadcrumb a { color: {{ settings.body_font_color }}; }

如果你看主页http://festrags.com/ (密码=“切耶”) 该按钮不会导致跳转，但在产品和产品系列页面上会导致跳转 http://festrags.com/collections/all

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

Answer 1

“赞”按钮正在将 iframe 加载到您的页面，这对于所需的视口(viewport)来说太大了。尝试添加这个:

.hide-fb
{
    Overflow:hidden;
}

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

为了防止你的 ListView 的内容跳转，你可以添加这个css:

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

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

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

尝试删除包含 overflow:hidden 的 .hide-fb 的每个实现；然后将其添加到您的 CSS 中:

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

fb 类插件的 Container 不应该被切断

更新 3: 这开始变得愚蠢了...... 我已经创建了你的页面的 fiddle ，我所做的就是这样:

.hide-fb {
    height: 34px;
}

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