Bootstrap 3.3.7 - 网格系统在Safari 10上不起作用？

时间：2017-03-15 20:51:47

标签： twitter-bootstrap safari grid zurb-foundation grid-system

来自文档here，它表示它支持IOS和Mac桌面上的Safari。

但为什么这是我在Safari上得到的？

enter image description here

这是我的代码：

＆＃13;
＆＃13; 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<style type="text/css">
    .grid-item {
        display: block;
        margin: 0 5px;
        border: 1px solid red;
        height:100%;
    }

    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
        padding-left: 0;
        padding-right: 0;
    }

    /* Equal image height */
    /* http://stackoverflow.com/questions/42157249/css3-flex-stretches-the-image-instead-of-centering-it */
    /* Only apply to large, medium and small screens */
    /* https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries */
    /* Small Devices, Tablets */
    /* Medium Devices, Desktops */
    @media only screen and (min-width : 768px),
    @media only screen and (min-width : 992px) {
        .eq-height {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display:         flex;
          flex-wrap: wrap;
        }
    }

    .eq-height > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }

    .eq-height > [class*='col-'] > [class*='col-'] {
        height:100%;
    }

    /* Hide actual image but use inline cover image */
    a.grid-item img {
        opacity:0
    }

    a.grid-item {
        background-size:cover
    }

    /* Gaps between items/ tiles */
    .col-sm-3 .col-sm-12,
    .col-sm-6 .col-sm-12,
    .col-sm-3 .col-sm-12 + .col-sm-12 {
        margin-top:10px;
    }

    /* Change container size */
    .container {
        width: 100%;
        max-width: 1400px;
        min-width: 320px;
        margin: 0 auto;
    }

    @media only screen and (max-width: 1420px) {
        .container {
            padding: 0 20px;
        }
    }

</style>

<div class="container">

    <div class="row eq-height">

        <div class="col-sm-3">
            <div class="col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1240" alt=""> </a>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x603" alt=""> </a>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
            <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

    </div>

    <div class="row eq-height">

         <div class="col-sm-3">
            <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
            <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x900')"> <img class="img-responsive" src="http://placekitten.com/g/800/1200" alt=""> </a>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="col-sm-12">
                <a href="#" class="grid-item">
                    <video width="100%" height="100%" autoplay muted controls loop class="clip-polygon">
                        <source src="big-buck-bunny_trailer.webm" type="video/webm">
                    </video>
                </a>
            </div>
        </div>

    </div>

    <div class="row eq-height">

        <div class="col-sm-6">
            <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
            <div class="col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/600x1000')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a>
            </div>
        </div>

    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我环顾四周但却找不到任何修复方法。有任何想法吗？

如果我把它升级到version 4，那就更糟了 - 它在Chrome上破坏了！

Foundation怎么样？它对所有浏览器都有更好的网格系统支持吗？

请注意，您必须在整页上运行我的代码才能在Chrome，Opera和Firefox上看到正确网格布局。

1 个答案:

答案 0 :(得分：0)

Zurb 6支持最新两个版本的Chrome，Firefox，Safari，Opera，Mobile Safari，IE Mobile（旧版Windows Phone和Windows CE设备），IE 9+以及Android网络浏览器2.3 +

http://foundation.zurb.com/sites/docs/compatibility.html

通过Bootstrap将你指向Zurb是不公平的。由您决定需要支持哪些浏览器。我很乐意帮助您解决特定的Zurb问题。

相关问题
最新问题