主页 / 问题 / 1127433
Accepted
Node_pro
Asked:2020-05-18 18:12:34 +0000 UTC2020-05-18 18:12:34 +0000 UTC

具有分数高度的元素呈现不同

  • 772

给定：三条直线的汉堡包，其中直线由 ( ::before + div + ::after) 组成 规则相同，除了 ( div + ::after) 的边距顶部缩进。

问题：高度div小于 1 个像素::before и ::after。但！这仅适用于某些屏幕尺寸。由于高度是从 rem 构建的，而 rem 又会随着屏幕尺寸的变化而变化。

解决方案：由于 px 有时会生成为分数，这就是整个问题，有时也可以更改边距。但有趣的是，为什么这些线条是由不止一种算法以这种方式生成的。也许有一种方法可以在没有媒体的情况下纠正这种不公正现象。目前这不是一个大问题，但这不是第一次发生类似的问题。

PS：问题出现在webkit上。父母身高不限

.header-hamburger {
  cursor: pointer;
  width: 1.5rem;
  background: none;
  border: 0;
  padding: 0;
  position: relative;
  z-index: 9999;

  & > *, &::after, &::before {
    border-radius: 3px;
    height: .1rem;
    background: $white;
    transition: all .3s;
    position: relative;
    display: block;
  }

  & > *, &::after {
    margin-top:  0.4rem;
  }

  &::before, &::after {
    content: '';
  }
}
css

1 个回答

  1. Best Answer

    带小数值的高度

    浏览器以不同的方式用小数对大小进行四舍五入——这个问题不是第一年。虽然这甚至不是问题，但正常行为 - 您不能“绘制”半个像素或其三分之一。在这种情况下，浏览器会为自己四舍五入并绘制它——只是算法不同。

    display: flex此外，即使跨浏览器对齐具有奇数高度的元素align-items: center也会产生不同的效果——同样是由于向上或向下舍入。

    REM 的工作原理

    有一些规则可以帮助您理解工作rem：

    • rem总是相对于根元素的字体大小 - 即标签html。如果html元素的字体大小为16px，则1rem= 16px，而.1rem= 1.6px。
    • rem将始终相对于根元素，而不依赖于嵌套元素。

    因此，它rem的工作原理如下： 中指定的数字rem乘以font-size根元素，结果值由浏览器在 中呈现px。

    如何解决您的问题

    至于你的问题，有两种方法可以解决：

    1. 中使用固定值px；
    2. in仅指定与根元素rem相乘时将产生整数的值 。font-size
    • 1

相关问题