在我的网站上,我使用了一些 Bootstrap 功能来帮助我的 CSS。我第一次加载页面时遇到一个奇怪的问题,一些元素的定位一开始是关闭的,但是当我重新加载页面时它是固定的。关于如何解决此问题的任何想法?
Images below for reference.
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 }
这个问题在过去几周左右一直存在。感谢您的帮助!
最佳答案
因此,问题似乎出在我将样式表链接放置在代码中的位置。在第一个示例中,它前面的元素可能导致加载时间更长(谷歌分析等)。
我移动的样式表:<%= stylesheet_link_tag "bootstrap.min", "application" %>
将链接移至 google analytics 上方后,似乎解决了定位问题。
关于html - 页面首次加载时的大小差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52425951/