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

IE 9： IE9

IE 10： IE10

IE 11： IE 11

Answer 1

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

https://github.com/doctyper/flexie

在旧版本的Internet Explorer中，站点无法正常显示

1 个答案: