1

我正在做一个响应式网站，但最奇怪的事情正在发生，在我为 ipad 添加特定的 css 查询后，网站完全中断，它永远不会停止加载。

这是网站http://ficm.hacemoscodigo.com/的链接，如果你加载它的宽度大于 1024 一切都会好起来的，如果你将窗口大小调整为低于 1024 一切都会好起来的，但是如果您首先使用宽度在 768px 和 1024px 之间的窗口加载它，这将导致我刚刚描述的错误。

这是我的 CSS 查询：（它是用 LESS 编写的）

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1025px) {
#sidebar_ipad{ display: none; }
}

/* iPads (portrait/vertical) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {

#container{ width: 768px; }

#sidebar_desk{ display: none; }

#sidebar_ipad{ display: block; width: 768px; float: none;
    #logo{ width: 238px; float: left;
        img{ width: 100%; }
    }
    #menu_fijo{ width: 492px; float: left; margin-left: 10px; }
}
}

我不确定这是因为 CSS 造成的，它让我大吃一惊，与 CSS 相关的东西会如此严重地破坏网站。（Chrome 发疯了，甚至想杀死页面）

4

1 回答 1

4

问题在于 JS 而不是 CSS，因为代码陷入了无限循环functions.js，第 853 行。

从我所见，您正试图逐步增加元素的字母间距，.ajusta_tracking直到它改变高度。但是，元素在 inside #sidebar_desk，当#sidebar_desk被隐藏时，元素的高度永远不会改变。由于代码只有在高度发生变化时才会跳出循环，所以它会永远运行，看起来就像崩溃了一样。

来自functions.js的相关代码在这里（不相关的部分被删掉）：

function ajusta_tracking( selector ){
    var clase = $(selector);
    var altura = clase.height(); // clase.height() is 0, as it is hidden
    var nuevaAltura = altura;
    while( nuevaAltura === altura ){
        interletraje += 0.1;
        clase.css( 'letter-spacing', interletraje + 'em' );
        // clase.height() is always 0, as it is hidden
        // so the following line does not change anything
        nuevaAltura = clase.height(); 
    }
}

ajusta_tracking('.ajusta_tracking');

确保你没有ajusta_tracking()在隐藏元素上运行，或者确保它可以完成循环，如果你需要它的代码运行的话。

于 2013-04-30T17:20:49.203 回答