jquery - 调整大小时填充被删除

Question

我有一个网站，但前两页出现问题。 http://www.readysetpixel.net/about.html和 http://www.readysetpixel.net/faq.html

内容的填充设置为 20px，当我将其设置为当浏览器调整为 800px 时，内容的最大高度切换为 490px，如下所示。

<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>

所有这些在 google chrome 中都可以正常工作，但在 firefox 和 IE 中，它们出于某种原因忽略了底部的填充。我尝试添加

  $('.pad').css('padding-bottom', '20px'); //sets padding

然后删除的方式与最大高度相同，这会起作用，但它会在调整大小时为谷歌提供额外的 20px 的填充。

如有任何帮助，我们将不胜感激。

更新:

sayhello 和竞赛页面在做同样的事情。出于某种原因，当我将填充与表单一起使用时，它可以在 firefox、IE 和 chrome 中正确读取它。这很奇怪，因为如果我对前两个页面做同样的事情，它会给 chrome 额外 20px 的填充。

Answer 1

我相信这是一个渲染错误，因为底部边距没有被添加到高度计算中(FF & IE Render Bug Article)。跨浏览器修复症状应该不会太难；您可以将高度计算向下移动一层(滚动层之外)。

<div class="scroll">
    <div class="content">
        <h1>...</h1>
        <div>...</div>
    </div>
</div>

.scroll 负责height & overflow；而 .content 将负责 width 和 padding。不是最优雅的解决方案，但它会解决您的跨浏览器问题。

如果你想让我设置一个 fiddler ，请告诉我。

不相关的旁注:检查 CSS 后，您的站点可能会受益于某些 OOCSS 方法(如果您担心此类事情，肯定会减少 css 文件的大小)。