Foundation utils 在 ie8 中不工作

Foundation utils is not working in ie8

我正在尝试在 IE8 中使用 Foundation.utils,但我总是只在小的上得到 true,在其余的上得到 false,例如:

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

当然不会出现上面的情况,如果只是小,那肯定是小了...

有什么解决办法吗?

基础 5 doesn't support IE 8 at all but you can try this.

引自Foundation FAQ:

Why doesn't Foundation support IE7 or IE8? Or: why we don't support a dying species.

This is probably the biggest question we get. Consider this: most of today's popular browsers automatically upgrade themselves including Chrome, Firefox and Explorer (starting with 9). IE 8 is the last IE supported on Windows XP, which Microsoft will officially stop supporting next year. That played a part in our decision.

Besides that, since Foundation 4, our framework is built mobile-first, meaning it relies on media queries to layer in more complex layouts and components. Browsers or devices that don't support media queries will be restricted to a simple, single-column layout. In some ways, Foundation 4 better supports IE6-7 insomuch as it provides a mobile but not entirely broken experience. If IE8 support is important for your users / customers, you can use Foundation 3.2, which supports IE8. It's not mobile first but it's good stuff.

我已经编写了自己的解决方案来支持 ie8 中的实用程序。 我专门为我的使用构建了它(它可以做得更好,但为什么要付出努力?它只适用于 ie8..),我仍然相信你可以使用它,即使进行一些小的调整。

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+'"); }');
});