动态内容的响应式网格布局问题(仅限 IE 11 的问题)

我正在使用引导 4 测试版，在为响应式网格生成动态内容时遇到了布局问题。除IE 11外，所有浏览器似乎都可以正常工作(Edge工作正常(。

如果我保持布局静态，一切看起来都很流畅，如下所示，这里是引导代码。

现在，如果我将其更改为动态生成数据并填写div，它将开始在布局IE 11中给我带来问题，这是引导代码。

每件事在Firefox，Chrome和Edge中都运行良好，但仅在IE 11中开始显示问题。

添加代码示例，您可以将这些文件另存为 html 并在 IE11 中进行测试，您将看到问题。

静态代码示例

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   
    <script>
        function openWindow()
        {
            $('#myModal').modal({show:true})
        }
        </script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
    <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" crossorigin="anonymous"></script>     
</head>
<body>
    <a class="btn btn-default" id="openBtn" href="#" onclick="openWindow();">Open modal</a>
    <div tabindex="-1" class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-body">
          <h4 class="g-mb-10 g-color-primary g-font-weight-600 text-capitalize">Company Name INC. <span class="h5 g-color-black">123343244</span></h4><div><div class="row"><div class="col-xl-12 col-xs-12 g-mb-15"><ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13"><li class="media"><i class="d-flex mt-1 mr-3 icon-hotel-restaurant-235 u-line-icon-pro"></i><div class="media-body">68 SOME AREA ST, QUEENS, NY, 11345 - 6345, United States</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-001 u-line-icon-pro"></i><div class="media-body">http://www.microsoft.com</div></li></ul></div></div><div class="row"><div class="col-xl-6 col-lg-6 col-md-12 col-xs-12 g-mb-5"><ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13"><li class="g-color-black g-font-weight-600 text-capitalize">Bill CLINTON</li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-033 u-line-icon-pro"></i><div class="media-body">800 852 3543</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-155 u-line-icon-pro"></i><div class="media-body">800 852 3543</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-062 u-line-icon-pro"></i><div class="media-body">support@microsoft.com</div></li></ul></div><div class="col-xl-6 col-lg-6 col-md-12 col-xs-12 g-mb-5"><ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13"><li class="g-color-black g-font-weight-600 text-capitalize">Bill CLINTON</li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-033 u-line-icon-pro"></i><div class="media-body">800 852 3543 ext 205</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-155 u-line-icon-pro"></i><div class="media-body">800 852 3543</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-062 u-line-icon-pro"></i><div class="media-body">support@microsoft.com</div></li></ul></div></div></div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button>
        </div>
        </div>
    </div>
    </div>
<body>
</html>

动态代码示例

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   
    <script>
        function openWindow()
        {
          $('#innerData').html('<h4 class="g-mb-10 g-color-primary g-font-weight-600 text-capitalize">Company Name INC. <span class="h5 g-color-black">123343244</span></h4><div><div class="row"><div class="col-xl-12 col-xs-12 g-mb-15"><ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13"><li class="media"><i class="d-flex mt-1 mr-3 icon-hotel-restaurant-235 u-line-icon-pro"></i><div class="media-body">68 SOME AREA ST, QUEENS, NY, 11345 - 6345, United States</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-001 u-line-icon-pro"></i><div class="media-body">http://www.microsoft.com</div></li></ul></div></div><div class="row"><div class="col-xl-6 col-lg-6 col-md-12 col-xs-12 g-mb-5"><ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13"><li class="g-color-black g-font-weight-600 text-capitalize">Bill CLINTON</li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-033 u-line-icon-pro"></i><div class="media-body">800 852 3543</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-155 u-line-icon-pro"></i><div class="media-body">800 852 3543</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-062 u-line-icon-pro"></i><div class="media-body">support@microsoft.com</div></li></ul></div><div class="col-xl-6 col-lg-6 col-md-12 col-xs-12 g-mb-5"><ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13"><li class="g-color-black g-font-weight-600 text-capitalize">Bill CLINTON</li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-033 u-line-icon-pro"></i><div class="media-body">800 852 3543 ext 205</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-155 u-line-icon-pro"></i><div class="media-body">800 852 3543</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-062 u-line-icon-pro"></i><div class="media-body">support@microsoft.com</div></li></ul></div></div></div>');
            $('#myModal').modal({show:true})
        }
        </script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
    <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" crossorigin="anonymous"></script>     
</head>
<body>
    <a class="btn btn-default" id="openBtn" href="#" onclick="openWindow();">Open modal</a>
    <div tabindex="-1" class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-body">
          <label id="innerData"/>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button>
        </div>
        </div>
    </div>
    </div>
<body>
</html>

好的，在任何地方都没有找到帮助后，我通过逐行调试 CSS 来弄清楚。一旦在标题中添加，这个问题就会消失(至少对于IE11，这是我最关心的问题(

<style>
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     .inblock_issue{display:block;}
}   
</style>

并且不要忘记将类"inblock_issue"添加到div。

相关内容

最新更新

热门标签：