Question

我有一个网站，前两页给我带来了问题。 http://www.readysetpixel.net/about.html和http://www.readysetpixel.net/faq.html

内容的填充设置为20px，当我将其设置为当浏览器调整为800px时，max-height将切换为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>

所有这一切在谷歌浏览器中运行良好，但在Firefox和IE中，由于某种原因，它们会忽略底部的填充。我试图添加

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

然后删除与max-height相同的方式将起作用，但是当调整大小时它会为谷歌提供额外的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＆amp; overflow; .content对width＆amp; padding负责。 {{1}}。不是最优雅的解决方案，但它将解决您的跨浏览器问题。

如果你想让我设置一个小提琴手，请告诉我。

无关副词注意：在检查CSS之后，您的站点可能会对某些OOCSS方法有所帮助（如果您担心这类事情，肯定会减少css文件的大小）。

调整大小时填充消失

1 个答案: