CSS媒体查询使浏览器挂起

我在做一个响应式网站，但最奇怪的事情发生了，在我为ipad添加了特定的css查询后，网站完成了休息，它永远不会停止加载。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。（镀铬进坚果，甚至想杀死页）

来源

2013-04-30 Raúl De Zamacona

尝试通过逐行评论您的CSS内的媒体查询，看看哪一行是打破它。 – gaynorvader 2013-04-30 16:43:39

@gaynorvader我已经和我认为这是一个'#sidebar_desk {display：none; }'但我不明白为什么或者还有什么要做，因为我需要隐藏div。：/ – 2013-04-30 16:46:17

您是否尝试验证它？很确定在冒号之前不能有空格：'（min-width：768px）'应该是'（min-width：768px）' – cimmanon 2013-04-30 17:09:35

的问题是在JS不是在CSS，因为代码被抓到在functions.js一个无限循环，线853

从我可以看到你正在尝试逐步增加元素的字母间距.ajusta_tracking，直到它改变高度。但是，元素位于#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-30 17:20:49 nethopp3r

就是这样！非常感谢你。 :) – 2013-04-30 17:41:43

CSS媒体查询使浏览器挂起

回答

相关问题