html 代码在 chrome 和 safari 中的执行方式不同答案

【问题标题】：html code executing differently in chrome and safarihtml 代码在 chrome 和 safari 中的执行方式不同
【发布时间】：2015-01-30 23:24:17
【问题描述】：

我正在做一个项目。我的代码在 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 张图像。

非常感谢您的帮助。

【问题讨论】：

浏览器有默认样式，这可能是原因。您可以包含一个重置 CSS 页面（预制，浏览网页），它会重置所有浏览器的默认样式。
感谢您的建议，我已经尝试过了。结果还是一样

标签： html css google-chrome safari

【解决方案1】：

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

【讨论】：