Question

以下示例在Firefox中的Chrome浏览器中正常运行，显示的网格行数均匀填充。

然而，它在Safari中失败了。一些元素消失（显然是由于容器中的overflow: hidden规则），就好像忽略了容器的宽度。

为什么？

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

<style>
    .enlaces-home {
        width: 85%;
        max-width: 1600px;

        margin: 0 auto;
        overflow: hidden;

            display: flex;
    display: -webkit-flex;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;

  -webkit-flex-wrap: wrap;

      -ms-flex-wrap: wrap;

          flex-wrap: wrap;
    padding-bottom: 20px;
    }

    .enlaces-home a:hover {
        text-decoration: underline;
    }

    .enlace-home {
        display: block;
    }

    .enlaces-home > div {
        /*flex: 1 1 30%;*/
        min-width: 30%;
        text-align: center;
        margin: 10px 5px;

        font-size: 1rem;
        font-weight: bold;
    }

    .enlaces-home > div img {
        margin-bottom: 5px;
        border: 3px solid #ccc;
    }
</style>
</head>
<body>

<div class="enlaces-home">
<div><a href="">
        <img src="https://placekitten.com/276/186" alt="">
        <div>Lorem ipsum.</div>
    </a></div>
<div><a href="">
        <img src="https://placekitten.com/276/186" alt="">
        <div>Lorem ipsum.</div>
    </a></div>
<div><a href="">
        <img src="https://placekitten.com/276/186" alt="">
        <div>Lorem ipsum.</div>
    </a></div>
<div><a href="">
        <img src="https://placekitten.com/276/186" alt="">
        <div>Lorem ipsum.</div>
    </a></div>
<div><a href="">
        <img src="https://placekitten.com/276/186" alt="">
        <div>Lorem ipsum.</div>
    </a></div>
<div><a href="">
        <img src="https://placekitten.com/276/186" alt="">
        <div>Lorem ipsum.</div>
    </a></div>
</div>

</body>
</html>

＆＃13;

基于Flexbox的网格超出范围＆＃39;在Safari中

0 个答案: