0

在基于 WebKit 的浏览器（如 Chrome 或 Safari）中查看此 jsFiddle，然后将其与在非基于 webkit 的浏览器（如 Firefox 或 Internet Explorer）中查看时看到的内容进行比较。

你会发现它们显然不一样。下面是左边的 Chrome 和右边的 Firefox：图片比较了非 webkit 和 webkits 对百分比距离的解释。

原因是 WebKit 对闲置的小 CSS 标记的解释与其他浏览器的解释不同：

span.upArrow.menu{
    margin: 36.1% 0 0 12.5%;
}

更准确地说：WebKit 将 36.1% 解释为不是页面宽度的 36.1%，而是元素宽度或高度的 36.1%。

首先使用百分比的原因是因为站点根据屏幕的比例上下缩放。这段代码用于菜单。因此，如果您在 Android 或 iPhone 上使用默认浏览器，则该网站现在看起来不错。但是如果用户使用 Opera 或 Firefox，在 Windows 手机上的内容中间会出现一个巨大的丑陋三角形。

所以我的问题就变成了。有没有办法解决 WebKit 中的这个错误？

如果可能的话，可以为 webkit 和非 webkit 浏览器编写单独的标记。但也许更好的是找到在这两种情况下都有效的解决方案。

4

2 回答 2

1

看看这个叉子。

我稍微改变了方法，将菜单项设置为position: relative并定位您的箭头，而不是添加边距来实现布局。

这是更新的 CSS（从选择器中删除附加的div和span，它们不是必需的）：

.menuButton{
    display: inline-block;
    width: 32%;
    padding: 2% 0;
    position: relative;
}

.upArrow.menu{
    bottom: 0;
    left: 50%;
    margin-left: -15px;   
}

负边距与箭头的边框宽度相匹配，确保无论您的布局发生什么其他情况，它都始终位于准确的中心。

于 2012-11-26T12:48:14.647 回答
1

发生这种情况是因为箭头跨度没有正确的位置。将跨度位置设为absolute，将 menuButton 设为position:relative。

div.menuButton{
    display: inline-block;
    width: 32%;
    padding: 2% 0;
    position:relative;
}
span.upArrow.menu{
    position:absolute;
    bottom:0; left:45%
}

演示

于 2012-11-26T12:47:43.767 回答