css - 在 android 中对齐不正确

Question

问题是当我在 Windows 和 iphone 中看到 css 属性工作正常时。但在 android 中它没有按预期工作。

在 iPhone 和 Windows 上

在安卓上

我的CSS:-

width: 25px;
height: 25px;
display: inline-block;
vertical-align: middle;
font-size: 25px;
line-height: 25px;
color: #6d20c5;
font-family: Verdana, Geneva, sans-serif;
padding-bottom:2px;

Answer 1

display: inline-block;

这使您的布局依赖于父容器的 font-size，因为它定义了内联元素之间的间隙，因为它们实际上是空格。此外，您没有在此元素本身中指定绝对字体大小，这可能会导致差异。

如果精确布局对此类元素很重要，请依赖更绝对的方法。在这种情况下，您可以使用绝对定位，因为元素具有固定大小，或者在绝对大小的容器内使用适当的填充 float 按钮。

考虑到 CSS，Android 在这里似乎更正确，因为您给它一个 2px 的底部填充，导致字符的垂直布局略高于中间。这对我或其他人来说是不可能正确调试的，因为我们看不到哪些其他规则正在影响它们，以及您是否正在使用任何重置方法，如 * { margin:0;填充:0； 全局。