ie11上的Bootstrap和JQuery布局异常

Bootstrap and JQuery layout anomaly on IE 11

本文关键字：布局 异常 JQuery 上的 Bootstrap ie11      更新时间：2023-09-26

我正在使用Bootstrap和JQuery为网站构建一个简单的图像库。每个图像放入3列宽的容器(.square)中。

我已经编写了一些JQuery来使容器的高度总是等于容器的宽度，从而为每个图像创建一个正方形。

然后我对图像进行样式设置以响应地适合正方形。这使我能够以一种"漂亮"的方式处理肖像和风景图像的混合。

这在我尝试过的几乎所有浏览器和设备上都很有效…除了IE 11，它抛弃了网格系统。

任何关于什么是抛出它(以及如何修复它)的想法将不胜感激。同样，提出其他处理方法的建议也会有所帮助。重要的是，我可以混合和匹配肖像和风景图像，但要保持一切水平和垂直的中心。

这是问题的截图。

IE 11示例

图库页面的jsfiddle可以在这里找到

这是我的页面标记:

CSS: 

    .square {}
    .gall_item{ max-height: 100%; 
                max-width: 100%; 
                width: auto; 
                height: auto; 
                position: absolute; 
                top: 0; 
                bottom: 0; 
                left: 0; 
                right: 0; 
                margin: auto; 
                padding: 2em 2em 2em 2em; }
HTML 

    <div class="main container-fluid">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1" >
            <div class="row">
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/800x600">
                </div>
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/600x800">
                </div>
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/800x600">
                </div>
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/800x600">
                </div>
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/800x600">
                </div>
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/800x600">
                </div>
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/600x800">
                </div>
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/800x600">
                </div>
            </div>
        </div>
    </div>
</div>
JQUERY 

    $(document).ready(makeSq);
    $(document).ready(makeSq);
    $(window).resize(makeSq);
    function makeSq(){
        $(".square").each(function(){
            $(this).height($(this).width());
        });
    }

您的第二组12列缺少一行。请参阅下面的HTML，我在其中添加了HTML元素，并添加了注释。

<div class="main container-fluid">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1" >
            <div class="row">
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/800x600">
                </div>
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/600x800">
                </div>
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/800x600">
                </div>
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/800x600">
                </div>
            </div>   <!-- this was missing -->
        </div>   <!-- this was missing -->
        <div class="col-lg-10 col-lg-offset-1" >  <!-- this was missing -->
            <div class="row">   <!-- this was missing -->              
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/800x600">
                </div>
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/800x600">
                </div>
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/600x800">
                </div>
                <div class="col-lg-3 square">
                    <img class="gall_item" src="http://placehold.it/800x600">
                </div>
            </div>
        </div>
    </div>
</div>
相关文章：