2

我一直在 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？

4

2 回答 2

0

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


      });
  }
于 2014-08-12T19:59:51.743 回答
0

以下是您的问题的两个潜在解决方案：

使用 em 而不是百分比

我已经能够通过使用类似于 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>

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

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

或者，使用 Safari 特定的边框

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

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

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

于 2014-08-18T01:42:09.690 回答