Question

我有site。当我加载它时，有一段时间Facebook的按钮正在加载，但就在它加载之前，电话号码下降了一段时间，然后上升到正确的位置，为什么??

注意：如果您的连接速度非常快，您可能不会注意到这一点。

这是代码：

  header {
    border-top: 6px solid #9F9F9F;
    margin: 0 auto;
    background-color: $amarillo;
    width: 960px;
    padding: 19px 34px;
    @include box-sizing (border-box);
    .logo-h1 {
      float: left;
      .logo {
        width: 324px;
        height: 57px;
        a {
          width: 324px;
          height: 57px;
          display: block;
        }
      }
      h1 {
        font-size: 17px;
        font-family: Verdana, Verdana, Geneva, sans-serif;
        width: 491px;
        margin-left: 20px;
        color: #BC2758;
        margin-top: 6px;
      }
    }
    .garantia {
      display: inline-block;
      margin: 9px 24px 0 0;
      width: 145px;
      height: 91px;
    }
  }
  .telicon {
    display: inline-block;
    margin-right: 4px;
    width: 18px;
    height: 34px;
    margin-top: 4px;
  }
  .tel-fb {
    float: right;
    #tel {
      float: right;
      a {
        font-size: 29px;
        color: #009846;
        font-weight: bold;
      }
    }
    .fb-like {
      float: right;
      margin-top: 3px;
    }
  }

<header>
  <span class="logo-h1">
    <div class="logo my-icons-logo">
      <a href="/"></a>
    </div>
    <h1>Instalación de canalón en Madrid, Guadalajara, Cuenca, Toledo, Segovia, Soria y Ávila</h1>
  </span>
  <span class="garantia my-icons-garantia"></span>
  <span class="tel-fb">
    <div>
      <span class="telicon my-icons-telicon" style="float: left"></span>
      <span 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>
      </span>
    </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>
  </span>
  <div style="clear: both"></div>
  <!--<div class="fb-like" data-href="http://www.canalonesbastimar.es" data-send="true" data-width="450" data-show-faces="true" data-action="recommend"></div>-->
  <div style="clear: both"></div>
  <!-- navbar goes here -->
</header>

Answer 1

你绝对应该像Facebook一样定位小部件。它当前是文档常规流的一部分，因此当它加载时，它会推动其他元素（即导航链接）。如果您向元素添加position:absolute（以及top / left或right以正确定位它），您将不会受到“紧张”的负担。

例如，将此CSS添加到窗口小部件：

position: absolute;
top: 75px;
right: 0;

并使其成为父position:relative应该解决您的问题。

页面加载时元素正在移动

1 个答案: