Safari的浮动或大小调整问题

Question

我一直在CodePen中嘲笑这个组合，它的工作非常漂亮......除了在Safari中。

http://codepen.io/tpalmer75/pen/FijEh（只有一个.item元素的SASS）

.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计算功能，盒子大小调整，浮动等等。这就是Chrome和Firefox中的样子。

在Safari中：

有什么想法吗？

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

修改的

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

Answer 1

问题是由用于制作网格的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;
        });


      });
  }

Answer 2

以下是解决问题的两种可能方案：

使用ems而不是百分比

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

//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>

使用ems调整大小的内容将根据浏览器窗口的大小调整大小。它也会根据宽高比而变化。

您可能需要调整计算以使其适合您。 Squeezemod修复从来都不是100％。

或使用特定于野生动物园的边界

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

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

xxxxxx是您定义样式的地方，例如保证金1px 利用它来添加Safari已经以适合您的项目的方式起飞的宽度 - 边距，边框等。您甚至可以仅使用此方法完全重新定义Safari的宽度。