Html 解决webkits对百分比值的误解

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

你会发现它们显然不一样。下面是左侧的Chrome浏览器和右侧的Firefox浏览器：

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

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

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

首先使用百分比的原因是，站点根据屏幕的比例上下缩放。这段代码用于菜单。因此，如果你在Android或iPhone上使用默认浏览器，网站现在的状态看起来很好。但是在Windows手机的内容中间有一个巨大的丑陋三角形，或者用户使用Opera或Firefox。 所以我的问题就变成了。有没有办法解决WebKit中的这个bug

---

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

这是因为箭头span没有正确的位置。使跨度位置为

绝对

，菜单按钮为

位置：相对

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

看一看

我稍微改变了方法，将菜单项设置为

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;   
}