javascript - 网站在旧版 Internet Explorer 中无法正常显示

Question

我很难弄清楚为什么我的网站无法在旧版本的 IE 中正常显示。

您可以查看我的演示站点here

我附上了显示不同 IE 版本如何显示我的网站的屏幕截图。

简单来说，站点包含一个无序列表，其中包含许多不同的列表项(用绿色框表示)每行应该只有 3 个绿色框。

在 IE 8 中，布局完全错误。绿色框不显示，并且有页面没有结构(参见 IE8 屏幕截图)

在 IE9 中，显示了绿色框，但它们没有正确排列(请参阅 IE9)

在 IE 10 中，除了顶部的绿色导航栏显示为堆栈外，它显示正常，而不是水平行(这也发生在 IE8/IE9 中)。

在 IE 11 中，它显示完全正常。

单个列表项代码为:

<li class="list__item2">
    <figure class="list__item__inner">
            <a class="divLink" href="http://www.ddd/Properties/Gammie/details.html">
    <p class="vignette" style="background-image:url(http://www.containermodularhouse.com/photo/pl728931-modern_prefab_bungalow_homes_angle_steel_frame_for_villa_and_small_house_wlh_bgl010.jpg)"></p>
    <div class="titlebox">Sample Title</div>
       <div class="locationbox">Sample Title</div>
     <div class="pricebox">Sample Title</div>
     </a>
    </li>

我正在使用 FlexWrap webkit 来对齐框，它的脚本是:

<script>

;( function( $, window, document, undefined )
{
    'use strict';

    var s = document.body || document.documentElement, s = s.style;
    if( s.webkitFlexWrap == '' || s.msFlexWrap == '' || s.flexWrap == '' ) return true;

    var $list       = $( '.list' ),
        $items      = $list.find( '.list__item__inner' ),
        setHeights  = function()
        {
            $items.css( 'height', 'auto' );

            var perRow = Math.floor( $list.width() / $items.width() );
            if( perRow == null || perRow < 2 ) return true;

            for( var i = 0, j = $items.length; i < j; i += perRow )
            {
                var maxHeight   = 0,
                    $row        = $items.slice( i, i + perRow );

                $row.each( function()
                {
                    var itemHeight = parseInt( $( this ).outerHeight() );
                    if ( itemHeight > maxHeight ) maxHeight = itemHeight;
                });
                $row.css( 'height', maxHeight );
            }
        };

    setHeights();
    $( window ).on( 'resize', setHeights );
    $list.find( 'img' ).on( 'load', setHeights );

})( jQuery, window, document );

</script>

整个 CSS 都在 html 代码中。查看页面源代码可以向您展示这一点。

如何使我的页面正确显示在所有 IE 版本中(如在 IE 11 中？)

谢谢!

IE 8:

IE 9:

IE 10:

IE 11:

Answer 1

您可以尝试使用 Flexie 来填充 Flexbox。它启用了 2009 Flexbox 模型，尽管它目前没有针对新规范的 polyfill

https://github.com/doctyper/flexie