html 代码在 chrome 和 safari 中执行不同

Question

我正在做一个项目。我的代码在 chrome 和 safari 中的工作方式不同。这是我的代码 `HTML:

<body>

    <div class="container">
        <ul class="rig">
<li>
        <a href="special offers.html"/><img src="gift.png" />
    <h3>Image Title</h3>

</li>
<li>
    <img src="food.png" />
    <h3>Image Title</h3>

</li>
<li>
    <img src="drink.png" />
    <h3>Image Title</h3>

</li>
<li>
    <img src="shopping.png" />
    <h3>Image Title</h3>

</li>
<li>
    <img src="events.png" />
    <h3>Image Title</h3>

</li>
<li>
    <img src="payingguest.png" />
    <h3>Image Title</h3>

</li>
</ul>
    </div>
</body>

MY CSS code:

 *{padding: 0; margin: 0;}
   body{
          width: 100%;
          margin: auto;}
   .container{
          width: 960px;
          margin: 0 auto;
          }

    ul.rig {padding-top: 100px;
           list-style: none;
           font-size: 0px;
            margin-left: -2.5%; 
            }
   ul.rig li {
            display: inline-block;
           padding: 10px;
          margin: 0 0 2.5% 2.5%;
          background: #fff;
          border: 1px solid #ddd;
          font-size: 16px;
          font-size: 1rem;
          vertical-align: top;
          box-shadow: 0 0 5px #ddd;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box; 
          text-decoration: none;}

     ul.rig li img {
      width: 280px;
       height: 280px;
      margin: 0 0 5px; }

     ul.rig li h3 {
      margin: 5px 0 5px;
       text-decoration: none; }

     ul.rig li p {
    font-size: .9em;
    line-height: 1.5em;
    color: #999;}

     ul.rig.columns-3 li {
      width: 30.83%; }


    @media (max-width: 480px) {
       ul.grid-nav li {
       display: block;
       margin: 0 0 5px;}

    ul.grid-nav li a {
    display: block;}

    ul.rig {
    margin-left: 0; }

    ul.rig li {
    width: 100% !important; 
    margin: 0 0 20px;}
    }

我的问题是我在 Safari、chrome、Internet Explorer 中执行了相同的代码。它工作正常 chrome 和 Internet Explorer。但在 safari 中不是。

代码是关于在网格中显示图像。此代码连续显示 3 张图像。但在 safari 中，它连续只显示 2 张图像。

非常感谢你的帮助。

Answer 1

这是您在 ul.rig li 元素上的边距。它的左边距为 2.5%。 Chrome、IE 等正在向下舍入像素，以便您的 3 个元素适合，而 Safari 正在向上舍入，以便只有 2 个适合。由于您的容器是固定宽度的，请尝试提供固定边距而不是百分比。或者你可以稍微增加容器大小或将边距减少到 margin: 0 0 2.5% 2.4%; http://jsfiddle.net/354rxymj/1/

html 代码在 chrome 和 safari 中执行不同

html code executing differently in chrome and safari

html

css

safari

google-chrome