Safari 浮动或磁贴的大小问题答案

【问题标题】：Safari float or sizing issue for tilesSafari 浮动或磁贴的大小问题
【发布时间】：2019-09-20 03:16:52
【问题描述】：

我一直在 CodePen 中模拟这个产品组合，它运行良好……除了在 Safari 中。

http://codepen.io/tpalmer75/pen/FijEh（SASS 仅用于一个 .item 元素）

.item
  width: calc(100% / 3)
  display: inline-block
  height: 0
  padding-bottom: 25%
  background-position: center center
  cursor: pointer
  overflow: hidden
  background-size: cover

我尝试过处理 CSS calc 函数、盒子大小、浮动等。这是 Chrome 和 Firefox 中的样子。

在 Safari 中：

有什么想法吗？

代码：http://codepen.io/tpalmer75/pen/FijEh

编辑

问题是由于 Safari 将所有百分比四舍五入到一个完整像素。我该如何解决这个问题，并且只针对 Safari？

【问题讨论】：

不是说这样解决了任何问题，而是100%/3是一个静态数字，你为什么要用calc？
不是一个整数，但是。我发现它比声明width: 33.33333333% 更好。但这就是问题所在，但 Safari 将其声明为 33px 像素而不是 33.3px 或 33.5px。
这不仅没有更好，而且对性能造成了非常不必要的拖累。
我没有意识到这一点，我想浏览器目前只能分解像素。感谢您的提示。

标签： jquery html css safari masonry

【解决方案1】：

这里有两种可能的解决方案：

使用 em 而不是百分比

我已经能够通过使用类似于 Squeezemod http://codepen.io/makerbox/pen/xksiK 的技术来克服这个问题 - 它使用 javascript 来获取浏览器窗口的宽度和高度，然后将其分解为 em：

//set function to get the size of 1em depending on browser aspect and size
function squeezemod(){
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var skinnyem = windowWidth / 95;
var fatem = windowHeight / 45;
var ratio = windowWidth / windowHeight;
if (ratio<2.1){
var emval = skinnyem;
}else{
var emval = fatem;
};
$("body").css({"font-size": emval + "px"});
};

//on resize do these functions
$(window).resize(function(){
squeezemod();
});

您还需要在 HTML 头中初始化该函数：

<script type="text/javascript">
//squeezemod();
</script>

使用 em 调整大小的所有内容都将根据浏览器窗口的大小进行调整。它也会根据宽高比而变化。

您可能需要调整计算以使其适合您。 Squeezemod 修复从未达到 100%。

或者，使用 Safari 特定的边框

通过使用 javascript，为您的项目类设置特定于浏览器的样式：

if ( $.browser.safari ){
$(".item").css('xxxxxx', 'xxxxxxx');
};

xxxxxx 是您定义样式的地方，例如边距 1px 使用此方法添加 Safari 以适合您项目的任何方式移除的宽度 - 边距、边框等。您甚至可以仅使用此方法为 Safari 完全重新定义宽度。

【讨论】：

感谢您的想法。我将尝试探索这些不同的选择。但是，当您深入到像素时，数学会变得非常复杂。
我通过从每个网格项中减去 4 个像素，制定了一个令人讨厌但有效的解决方案。 codepen.io/tpalmer75/pen/FijEh?editors=101

【解决方案2】：

这些问题是由所有用于制作网格的 calc() 函数和百分比引起的。

我正在使用 jQuery 检测浏览器并从每个项目中减去 4 个像素以进行补偿。

http://codepen.io/tpalmer75/pen/FijEh?editors=101

 // Find Safari Browser and exclude Chrome, iPad, iPhone, and iPod touch which all contain 'Safari' in the user agent
  if (navigator.userAgent.indexOf('Safari') != -1 && !navigator.userAgent.match(/(Chrome|iPad|iPhone|iPod Touch)/) ) { 

    alert('You are using Safari desktop.')

    var item = $('.item');
    var page = $('#page');

      item.width(function(){
        return $(this).width() - 4;
      });

      page.width(function() {
        return $(this).width() + 8;
      });

      $(window).resize(function() {


        item.css('width', '');
        page.css('width', '');

        item.width(function(){
          return $(this).width() - 4;
        });

        page.width(function() {
          return $(this).width() + 8;
        });


      });
  }

【讨论】：