0

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

内容的填充设置为 20 像素，当我将其设置为浏览器调整为 800 像素时，内容的最大高度切换为 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>

所有这些在谷歌浏览器中都可以正常工作，但在 Firefox 和 IE 中，由于某种原因，它们会忽略底部的填充。我试图添加

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

然后 delete 与 max-height 的方式相同，这将起作用，但是在调整大小时它会给谷歌额外的 20px 填充。

任何帮助，将不胜感激。

更新：

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

4

1 回答 1

0

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

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

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

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

不相关的旁注：在检查完 CSS 之后，您的网站可能会受益于一些 OOCSS 方法（如果您担心这类事情，肯定会减少您的 css 文件的大小）。

于 2012-08-19T15:58:35.427 回答