html - 页面首次加载时的大小差异

问题描述

在我的网站上，我正在使用一些 Bootstrap 功能来帮助我的 CSS。我第一次加载页面时遇到一个奇怪的问题，一开始有些元素的定位是关闭的，但是当我重新加载页面时它就固定了。关于如何解决这个问题的任何想法？

以下图片供参考。

HTML：

<div class="media post-react">
  <%= link_to post do %>
    <div class="media-left hidden-sm hidden-xs">
      <%= image_tag("#{post.thumbnail_link}", :width => 320, :height => 180, class: "news-object") %>
    </div>

    <div class="media-body">
      <div id="media-heading">
        <h2 class="media-title align-left"><%= post.title %></h2>
        <p class="blog-index-date align-right"><span class="hidden-sm">Last updated: </span><%= post.updated_at.strftime('%b %d, %Y') %></p>
      </div>
      <div style="clear: both;"></div>
      <p class="basic"><%= post.summary %></p>
      <p> </p>
      <p class="hype"><b>Read More</b></p>
      <p class="post-cat blog-index-date"><%= post.blog_category.name if post.blog_category_id.present? %></p>
    </div>
  <% end %>
</div>

CSS：

.media {
  padding: 10px;
  background-color: #404040;
  border-left: 4px solid #00BFFF;
  border-radius: 2px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.media-title { margin-top: 0px }
.media-body { position: relative }
.post-react {
  opacity: 0.8;
  transition: .45s, transform .45s ease;
  -moz-transition: .45s, transform .45s ease;
  -webkit-transition: .45s, transform .45s ease;
}

.post-react:hover {
  opacity: 1.0;
  -ms-transform: scale(1.01); /* IE 9 */
  -webkit-transform: scale(1.01); /* Safari */
  transform: scale(1.01);
}

.blog-index-date {
  padding-right: 5px;
  color: #999999;
}

.post-cat {
  position: absolute;
  bottom: 0px;
  right: 5px;
}

.news-object { border-radius: 2px }

首次加载：

刷新后：

这个问题在过去几周左右一直存在。谢谢您的帮助！

标签： htmlcsstwitter-bootstrap

因此，问题似乎出在我在代码中放置样式表链接的位置。在第一个示例中，它之前的元素可能导致加载时间更长（谷歌分析等）。

我移动的样式表：<%= stylesheet_link_tag "bootstrap.min", "application" %>

将链接移到谷歌分析上方后，它似乎解决了定位问题。

html - 页面首次加载时的大小差异

问题描述

解决方案

推荐阅读