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中执行相同的代码。它的工作精细铬和互联网浏览器。但在野生动物园不是。

代码是关于在网格中显示图像。此代码连续显示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/

在chrome和safari中执行不同的HTML代码

1 个答案: