Div 在任何移动 safari 中都被拉伸

Question

我有一个带有 div 的幻灯片，它们是图像的选择器。它们只是带有边框的 div。这是除了移动 safari 之外的每个浏览器的样子

这是移动版 Safari

这是他们的css：

.slick-dots {
  padding-left: 0px;
  text-align: center;
}
.slick-dots li {
  display: inline-block;
  list-style-type: none;
  margin: 0 3px;
}
.slick-dots li button {
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  height: 18px;
  width: 18px;
  opacity: 1;
  color: transparent;
}
.slick-dots li.slick-active button {
  background: #000;
}

.inspiration .slick-dots,
.destinations .slick-dots {
  padding-left: 0px;
}
.inspiration .slick-dots li button,
.destinations .slick-dots li button {
  background: none;
  border: 1px solid #fff;
}
.inspiration .slick-dots li.slick-active button,
.destinations .slick-dots li.slick-active button {
  background: #fff;
}

.slick-slide img {
  display: inline !important;
}

它设置的高度和宽度为 18px 的像素。看起来如果我将宽度更改为 18px 以下，它的宽度不会变小...有人以前见过这样的东西吗？

Answer 1

请删除您的宽度和高度，然后像这样设置 css

padding:9px;

这可能会解决 Safari 浏览器问题

Div 在任何移动 safari 中都被拉伸

Div being stretched on any mobile safari

html

css

safari

mobile-safari