Question

我正在尝试在IE8中使用Foundation.utils，但我总是在小的情况下变为真，在其余的情况下变为假，例如：

Foundation.utils.is_small_only() = true all the time
Foundation.utils.is_small_up() = false

当然上述情况不可能发生，因为如果它只是小的话，那肯定是小的......

对此有何解决方法？

Answer 1

基金会5 doesn't support IE 8，但您可以尝试this。

引自Foundation FAQ：

为什么基金会不支持IE7或IE8？或者：为什么我们不支持垂死的物种。

这可能是我们得到的最大问题。考虑一下：大多数   今天流行的浏览器自动升级包括   Chrome，Firefox和Explorer（从9开始）。 IE 8是最后一个IE   支持Windows XP，微软将正式停止   支持明年。这在我们的决定中发挥了作用。

除此之外，自从Foundation 4以来，我们的框架是基于移动优先构建的，   这意味着它依赖于媒体查询来分层更复杂的布局   和组件。不支持媒体查询的浏览器或设备   将限制为简单的单列布局。在某些方面，   基金会4更好地支持IE6-7，因为它提供了移动设备   但并非完全破碎的经历。如果IE8支持很重要   您的用户/客户，您可以使用Foundation 3.2，它支持   IE8。它首先不是移动设备，但它是好东西。

Answer 2

我已经编写了自己的解决方案来支持ie8中的utils。我专门为我的使用而构建它（它可以做得更好，但为什么要努力？它只适用于ie ..），我仍然认为你可以使用它，即使是微小的调整。

var win = $(window),
    bodyFontSize = parseInt(body.css('fontSize'));

function matchMediaQuery(mediaQuery)
{
    var winWidth = win.outerWidth(),
        winHeight = win.outerHeight(),
        mediaQuerySizes = mediaQuery.match(/\d+\.?\d*em/g);

    if (mediaQuerySizes == null)
    {
        return true;
    }
    else
    {
        mediaQuery = mediaQuery.replace(/^(only screen)( and )?/,'').replace('min-width:',winWidth + '>=').replace('max-width:',winWidth + '<').replace('min-height:',winHeight + '>=').replace('max-height:',winHeight + '<').replace('orientation:landscape',winHeight + '>' + winWidth).replace(' and ',' && ').replace(' or ',' || ');
        for (var i = 0, len = mediaQuerySizes.length; i < len; i++)
        {
            mediaQuery = mediaQuery.replace(mediaQuerySizes[i],parseInt(mediaQuerySizes[i])*bodyFontSize);
        }
        return eval(mediaQuery);
    }
}

$.each(Foundation.media_queries, function(key, value)
{
    eval('Foundation.utils.is_' + ((key.indexOf('-') > -1) ? key.replace('-','_') : key + '_up')  + ' = function() { return matchMediaQuery("'+value+'"); }');
});

Foundation utils在ie8中不起作用

2 个答案: