网站在旧版本的Internet Explorer中无法正确显示

Question

I'm having a very hard time figuring out why my site won't display properly in old versions of IE.

You can view my demo site here

I've attached screenshots showing how different IE versions display my site.

To put it simply, the site contains one unordered list, which contains many different list items (represented by green boxes) There should only be 3 green boxes per row.

In IE 8, the layout is totally wrong. The green boxes aren't displayed, and there is no structure to the page (see IE8 screenshot)

In IE9, the green boxes are displayed, but they do not line up properly (see IE9)

In IE 10, it displays fine except the green navigation bar at the top is shown as a stack, as opposed to a horizontal row (this occurs in IE8/IE9 too).

In IE 11, it displays totally fine.

The individual list item code is:

<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>

I'm using the FlexWrap webkit to align the boxes, it's script is:

<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>

The entire CSS is within the html code. Viewing the page source can show you this.

How do I make my page appear in all IE versions properly (like in IE 11?)

Thank you!

IE 8:

IE 9:

IE 10:

IE 11:

Answer 1

You can try using Flexie which polyfills Flexbox. It enables the 2009 Flexbox model although it currently does not have polyfill for the new specification

https://github.com/doctyper/flexie