html - Heroku 搞乱了我的 CSS 定位。在本地主机上看起来不错，在 Heroku 上看起来很糟糕

Question

所以我正在完成我最近构建的这个 Rails 4 应用程序，实际上已经结束了。我只需要让它在 Heroku 上运行。我已经预编译了我所有的 Assets ，虽然它加载了我所有的样式表和图像，但它把它们都放在了错误的地方。我还为 Iphone 5 制作了一个移动版本，它在移动模拟器的 Heroku 上运行良好。所以这只是笔记本电脑版本的问题。我安装了 Bootstrap，但没有经常使用它。

这是本地主机版本的图片:

http://i988.photobucket.com/albums/af6/jtbitt/ScreenShot2014-04-08at115020PM_zpsed0008a1.png

这里是 heroku 版本:

http://i988.photobucket.com/albums/af6/jtbitt/ScreenShot2014-04-08at115028PM_zps201cbd84.png

我几乎在我的应用程序的每个页面上都遇到了这些相同类型的问题。所以我在想，如果我能找到搞砸的设置，它会同时修复所有问题。有什么想法吗？

Answer 1

hey guys problem solved

不是真的——你的 CSS 仍然功能失调

这是它在我的显示器上的样子:

原因是您正在使用 position: absolute;定位所有元素。这通常是整个站点的大禁忌(小元素，是；大元素不)。

我做了 a very basic JSFiddle你将如何处理这个想法:

#html
<div class="stripe">
    <div class="phone"><img src="http://escrow.herokuapp.com/assets/iphone.png"></div>
    <div class="info">This is where information goes</div>
</div>

#CSS
.stripe {
    background-color: #ff0;
    height: 250px;
    margin: 60px 0;
}

.stripe > div {
    position: relative;
    top: -50px;
    display: inline-block;
    vertical-align: middle;
}

R