Question

我正在创建一个简单的列表，其中有4个项目在全屏模式下排成一行。在767px宽度以下，它们应该具有50％的宽度，但是在Iphone上存在问题。

我用html和css创建了jsfiddle。

.list-benefits-index {
  margin: 20px 0px;
  padding: 0;
  width: 100%;
  list-style-type: none;
  align-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}

.list-benefits-index li {
  width: 25%;
  float: left;
  font-weight: 400;
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 15px;
  padding: 5px 10px 5px 10px;
  display: flex;
  background: #fff;
    box-sizing: border-box;
}

.list-benefits-index li > span {
  border-radius: 5px;
  display: block;
  width: 100%;
}

.list-benefits-index li > span a {
  color: #000;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.list-benefits-index li > span a > span {
  display: flex;
  width: 100%;
  justify-content: center;
  line-height: 20px;
  text-align: center;
}

.list-benefits-index li > span a i {
  font-size: 50px;
  padding-bottom: 15px;
  color: #4ea2ec;
}

.list-benefits-index li > span a:hover {
  text-decoration: none;
}

@media (max-width:767px) {
  .list-benefits-index li {
            width: 50%;
    padding: 5px;
    margin-bottom: 5px;
  }

  .list-benefits-index li > span a {
    font-size: 14px;
  }

  .list-benefits-index li > span a i {
    font-size: 35px;
    padding-bottom: 5px;
  }
}

<ul class="list-benefits-index">
    <li>
        <span>
           <a href="/vyhody-nakupu">
               <i class="fa fa-check-circle"></i>
                <span>Vše skladem</span>
            </a>
        </span>
    </li>
    <li>
        <span>
           <a href="/vyhody-nakupu">
               <i class="fa fa-check-circle"></i>
                <span>Doprava zdarma nad 300 Kč</span>

            </a>
        </span>
    </li>
    <li>
        <span>
           <a href="/vyhody-nakupu">
               <i class="fa fa-check-circle"></i>
                <span>Doručení do 1 dne<br>při objednání do 14:00</span>
            </a>
        </span>
    </li>
    <li>
        <span>
           <a href="/vyhody-nakupu">
               <i class="fa fa-check-circle"></i>
                <span>Každý týden<br>nové zboží</span>
            </a>
        </span>
    </li>
</ul>

https://ctrlv.cz/F7w4屏幕和Iphone布局。

我不拥有Apple设备，因此我无法找出问题所在，如果我将响应宽度设置为100％，则显示正确，但是如果将其设置为50％，则会中断。

Answer 1

与所有浏览器支持属性一起使用，例如-o-，-webkit-，-moz-，-ms-

Answer 2

这是跨浏览器的常见兼容性。每种浏览器都有其自己的解释网页内容的方式，因此，从一种浏览器到另一种浏览器，网页上可能会有一些差异。

This可能会帮助您解决问题。

如果您没有iOS设备，则可以下载Safari Web浏览器或使用跨浏览器兼容性测试工具（here are a few tools)

我还建议您阅读this article about cross browser compatibility

最后，您的CSS可以得到改善。看看here。

当元素的宽度设置为50％时，iPhone设备上的响应问题

2 个答案: