Javascript 铬处理效果特别好_Javascript_Jquery_Css_Html

Javascript 铬处理效果特别好

javascript jquery css html

Javascript 铬处理效果特别好,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我有一个CSS布局，它在Firefox/Opera甚至Safari中都能正常工作，但在Chrome中的表现略有不同我通常有： * { margin: 0; padding: 0; } html, body { height: 100%; } div#container { min-height: 100%; width: 1000px; /* giving the page a fixed width */ margin: 0 auto; /* c

我有一个CSS布局，它在Firefox/Opera甚至Safari中都能正常工作，但在Chrome中的表现略有不同

我通常有：

* { margin: 0; padding: 0; }

html, body { height: 100%; }

div#container {
    min-height: 100%;
    width: 1000px;      /* giving the page a fixed width */
    margin: 0 auto;     /* centering the page */
    position: relative; /* making the footer stop when it meets the content */
}

现在，除了在Chrome中刷新页面外，一切都正常。在所有其他浏览器中，当我刷新页面时，内容会自动调整（如果页面高度不小于内容的最小高度），我不必向下滚动就能看到整个页面。在Chrome中，当我刷新页面时，页面会变得比屏幕更大，我必须向下滚动才能看到所有内容。请注意，内容不应该是问题所在，因为它不超过主要部分的高度

HTML布局基本上是：

<body>
    <div id="container">

        <header>stuff...</header>

        <section id="page_content">stuff...</section>

        <footer>stuff...</footer>
    </div>
</body>

而且，每次调整页面大小时，都会调用此JS函数，和加载页面时，都会调用此JS函数：

function resizeMainSection() { var finalHeight = $(window).height() - $('footer#page_footer').outerHeight(true) - $('header#page_header').outerHeight(true) // a simple div to stop the footer from going over the content when resizing - $('div#footer_stopper').outerHeight(true); var mainSection = $('section#page_content'); if (finalHeight < mainSection.css('min-height') || finalHeight > mainSection.css('max-height')) return; $(mainSection).height(finalHeight); }

函数resizeMainSection（）{ var finalHeight=$（窗口）.height（） -$（'footer#page _footer'）。outerHeight（true） -$（'header#page _header'）。outerHeight（true）//一个简单的div，用于在调整大小时阻止页脚越过内容 -$（'div#footer_stopper'）。outerHeight（true）； var mainsecute=$（'section#page_content'）；如果（最终高度mainSection.css（'max-height'）返回； $（主要部分）。高度（最终高度）； }
可能的原因是什么
编辑
我注意到，只有当我刷新页面时（通过Cmd+R或通过刷新按钮），我才会收到这个问题。如果我在浏览器中重新插入相同的URL，并单击“输入”，则布局样式正确。因此，正如有人在评论中建议的那样，可能是缓存问题。
我认为更好的脚本应该是从

if (finalHeight < mainSection.css('min-height') || finalHeight > mainSection.css('max-height')) return; $(mainSection).height(finalHeight);

if（最终高度mainSection.css（'max-height'）返回； $（主要部分）。高度（最终高度）；
致：

if（最终高度mainSection.css（'max-height'）） finalHeight=mainSection.css（'max-height'）； $（主要部分）。高度（最终高度）；

也就是说，高度是一个受最小值和最大值约束的值。如果计算值低于最小值，则建议操作是将其设置为最小值，而不是退出脚本
如果只是chrome问题，则可能与清除缓存有关。但我认为您的问题与此不同。1）Chrome developer tools（F12）控制台选项卡中是否有任何错误？2）我不熟悉jQuery调整大小/加载函数的“返回”部分的确切语法（这并不是说它无效！）。您是否尝试过用另一种方式重新启动该位以查看它是否导致了问题？@smclark89
return
表示立即退出该函数。我使用它是为了避免在高度太大/太小时调整大小。无论如何，Chrome在控制台中没有发出错误信号。@格林先生，也许这毕竟是一个与缓存相关的问题，请参阅我的编辑以获取详细信息查看元素并查看应用的CSS样式——它们看起来正确吗？
if (finalHeight < mainSection.css('min-height') || finalHeight > mainSection.css('max-height')) return; $(mainSection).height(finalHeight);

if (finalHeight < mainSection.css('min-height') finalHeight = mainSection.css('min-height'); if (finalHeight > mainSection.css('max-height') finalHeight = mainSection.css('max-height'); $(mainSection).height(finalHeight);