Css Heroku看起来与Localhost不同_Css_Ruby On Rails_Heroku

Css Heroku看起来与Localhost不同

css ruby-on-rails heroku

Css Heroku看起来与Localhost不同,css,ruby-on-rails,heroku,Css,Ruby On Rails,Heroku,我在我的localhost上正确设置了rails应用程序的一个页面，但当我将其推到Heroku时，一切都发生了很大的错误（据我所知，使用完全相同的代码）以下是我的本地主机上显示的内容：下面是在Heroku上发生的事情：以下是有关页面的html/erb代码： <div style="height: 80px"></div> <div class="text-center"> <h1 style="font-size: 10vh">Gi

我在我的

localhost

上正确设置了rails应用程序的一个页面，但当我将其推到

Heroku

时，一切都发生了很大的错误（据我所知，使用完全相同的代码）

以下是我的

本地主机上显示的内容：

下面是在Heroku上发生的事情：

以下是有关页面的html
/erb
代码：
<div style="height: 80px"></div>

<div class="text-center">
  <h1 style="font-size: 10vh">Gift Helper</h1>
  <p>Select the age group for which you are being forced to shop.</p>
</div>

<div style="height: 50px" class="hidden-xs"></div>


<div class="text-center frame">
  <%= image_tag 'speedometer.jpg', style: "width: 100%; max-width: 700px", class: "vertical-align-in-div", alt: "Speedometer of Gifting.  Ooooh.  Aaaaah." %>
</div>

<div class="text-center frame" style="margin-top: -465px">
  <%= image_tag 'needle.png', id: "needle", style: "width: 100%; max-width: 290px", class: "vertical-align-in-div", alt: "The Needle of Wisdom." %>
</div>

<div class="frame" style="margin-top: -450px; width: 80%; margin-left: 10%">
  <%= link_to gifts_babies_path, id: "kids" do %>
    <div id="kids" class="stacking-boxes"></div>
  <% end %>
  <%= link_to gifts_kids_path do %>
    <div id="teens" class="stacking-boxes"></div>
  <% end %>
  <%= link_to gifts_teens_path do %>
    <div id="babies" class="stacking-boxes"></div>
  <% end %>
  <%= link_to gifts_adults_path do %>
    <div id="adults" class="stacking-boxes"></div>
  <% end %>
</div>

<script>
  $('#babies').hover(
      function(){ $('#needle').addClass('animation-babies') },
      function(){ $('#needle').removeClass('animation-babies') }
  );
  $('#kids').hover(
      function(){ $('#needle').addClass('animation-kids') },
      function(){ $('#needle').removeClass('animation-kids') }
  );
  $('#teens').hover(
      function(){ $('#needle').addClass('animation-teens') },
      function(){ $('#needle').removeClass('animation-teens') }
  );
  $('#adults').hover(
      function(){ $('#needle').addClass('animation-adults') },
      function(){ $('#needle').removeClass('animation-adults') }
  );
</script>

最后，这里是相关的SCS
：
.frame {
    height: 450px; /*can be anything*/
    width: 80%;
    margin-left: 10%;
    position: relative;
}

.vertical-align-in-div {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.speedometer-label {
  position: absolute;
  z-index: 100;
  color: red;
  font-family: $font-writing;
  font-weight: bolder;
  font-size: 7vh;
}

.stacking-boxes {
  height: 175px;
  z-index: 100;
  position: relative;
  width: 49% !important;
  display: inline-block;
}

有人能看到错误在哪里吗？我想不出任何答案会使Heroku上的问题与我的本地主机上的问题有所不同，我最后写信给Heroku的帮助台，得到了以下回复：
在您最新的构建日志中，我注意到以下行：
检测到清单文件，假设资产是从
文件
您可以看到关于这意味着什么的解释：
如果在你的应用程序中检测到一个public/assets/manifest.yml，Heroku将
假设您自己正在处理资产编译，并且不会
尝试编译您的资产。Rails 4使用一个名为
public/assets/manifest-.json。在两个版本中，您都可以
可以通过在本地运行$rake assets:precompile生成此文件
并将结果文件检入Git
这意味着如果您在本地运行rake资产：precompile，即使只是
一次，然后签入您需要的清单文件
要运行资产，请在每次运行之前预编译并将结果检查到git中
部署虽然我们的一些客户喜欢这样做，以加快他们的
部署，这是一个相当微妙的变化，可以抓住人们
我建议从您的系统中删除public/assets/manifest.yml文件
git repo和重新部署应用程序，以便完成资产编译
又一次被Heroku自动控制了
当我运行rake assets:precompile
并将我的应用程序重新推送到Heroku时，问题就解决了。
我最后写信给Heroku的帮助台，得到了以下回复：
在您最新的构建日志中，我注意到以下行：
检测到清单文件，假设资产是从
文件
您可以看到关于这意味着什么的解释：
如果在你的应用程序中检测到一个public/assets/manifest.yml，Heroku将
假设您自己正在处理资产编译，并且不会
尝试编译您的资产。Rails 4使用一个名为
public/assets/manifest-.json。在两个版本中，您都可以
可以通过在本地运行$rake assets:precompile生成此文件
并将结果文件检入Git
这意味着如果您在本地运行rake资产：precompile，即使只是
一次，然后签入您需要的清单文件
要运行资产，请在每次运行之前预编译并将结果检查到git中
部署虽然我们的一些客户喜欢这样做，以加快他们的
部署，这是一个相当微妙的变化，可以抓住人们
我建议从您的系统中删除public/assets/manifest.yml文件
git repo和重新部署应用程序，以便完成资产编译
又一次被Heroku自动控制了
当我运行rake assets:precompile
并将我的应用程序重新推送到Heroku时，问题就解决了。我会首先检查（在chrome network inspector中）你的所有资产是否正确加载。你在控制台中有任何错误吗？@GuyDubrovski，只有一个控制台错误与该页面上没有使用的资产有关，所以没有什么有用的…@FrederickCheung，似乎所有的资产都根据控制台正确加载，除了（上面提到的）不影响此页面的资产。我首先检查（在chrome网络检查器中）您的所有资产是否正确加载。控制台中有任何错误吗？@GuyDubrovski，只有一个控制台错误与未在该页面上使用的资产有关，因此没有任何帮助…@FrederickCheung，似乎所有资产都根据控制台正确加载，但不影响此页面的（上面提到的）资产除外。
.frame {
    height: 450px; /*can be anything*/
    width: 80%;
    margin-left: 10%;
    position: relative;
}

.vertical-align-in-div {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.speedometer-label {
  position: absolute;
  z-index: 100;
  color: red;
  font-family: $font-writing;
  font-weight: bolder;
  font-size: 7vh;
}

.stacking-boxes {
  height: 175px;
  z-index: 100;
  position: relative;
  width: 49% !important;
  display: inline-block;
}