失去我的填充物答案

【问题标题】：Losing my padding失去我的填充物
【发布时间】：2012-08-19 14:22:11
【问题描述】：

我有一个网站，在 google chrome 中一切正常，但在 IE 和 firefox 中，当浏览器调整到 800 像素以下时，我的内容填充丢失了。

http://www.readysetpixel.net/about.html 是网址。如果您的屏幕高度大于 800 像素，它将在 20 像素的底部显示填充，但是当您调整屏幕大小时，IE 和 FireFox 会忽略填充。

会有这样的原因吗？我尝试了很多不同的东西，我要疯了。

【问题讨论】：

【解决方案1】：

问题是因为您明确将最大高度设置为 490 像素。如果您有针对设备的此类要求，则应改用媒体查询。有没有使用的理由

<script type="text/javascript">
$(document).ready(function() {
   $(window).on('resize', function(){
     if ($(this).height() <= 800){
      $('.content').css('max-height', '490px'); //sets max-height
     } else{
      $('.content').css('max-height', ''); //deletes max-height
   }
 }).resize()
})
</script>

在页面底部。我还看到您没有元端口视图标签，因此显然也没有进行响应式设计。摆脱底部（上）的脚本，你应该设置。

【讨论】：

如何使用 .content 的媒体查询获得相同的效果。我试过了，但我无法做到。
这是我刚才使用的，但它做同样的事情。 @media screen and (max-height: 800px) { .content {max-height: 490px;} }
@AnthonyRusso：你需要使用 metaport 视图标签来让媒体查询工作

【解决方案2】：

您可以为您的 body 或 CSS 中的某些父选择器尝试使用 min-width；

body{
  min-width: 800px;
}

【讨论】：