使用 CSS 转换在 Chrome 和 Firefox 中呈现问题

Question

虽然有时这里或那里的一个像素必须被原谅和遗忘。
但在这个例子中，这个简单的菜单需要完美呈现像素！
也就是说，菜单项之间的间距必须完全相等。
在我的示例中，所有菜单分隔符看起来都很丑陋、模糊，并且因为一些项目融合在一起而迷失了方向。
而其他人相距太远。一团糟。经过一夜的睡眠，
我得出的结论是，这是生活座右铭的场景之一
接受任何发生在你身上的东西是不能被接受的，设计师必须表明立场。

无论是虚线还是实线，我每走一步都会出现问题。
将边距设置为 -1px 并添加 1px 的边框并不能解决这个问题。
这两个示例均来自 2022 年最新版本的 Chrome 和 Firefox。

有没有一种方法可以用相等、精确的 pixelated/aliased 锐线分隔项目，而不会出现看似随机粗细的模糊抗锯齿模糊线？

您可以完全重写它或使用 flexbox 或任何其他优雅的 CSS 解决方案！

..............................

nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
nav {
    top: 0px;
    left: 0px;
    position: absolute;
    height: auto;
    display: inline-block;
    font-style: italic;
    font-size: 1.25em;
    padding: 0px 0 0 0;
}
nav li {
    background-color: blue;
    writing-mode: vertical-rl;
    transform: scale(-1);
    line-height: 1em;
    border-top: 1px dashed white;
}
nav li a {
    display:block;
    text-decoration: none;
    color: #fff;
    padding: 2em;
}

<nav>
  <ul>
    <li><a href="#">Bureau</a></li>
    <li><a href="#">Projecten</a></li>
    <li><a href="#">Diensten</a></li>
    <li><a href="#">Ontwerpen</a></li>
    <li><a href="#">Concepten</a></li>
    <li><a href="#">Kunsten</a></li>
  </ul>
</nav>

Answer 1

当您开始将变换应用到它们所应用的元素时，边框可能很复杂，因此从包含 <li> 的元素中删除 transform:scale(-1) 并改为变换 <a>：

nav li {
    background-color: blue;
    writing-mode: vertical-rl;
    line-height: 1em;
    border-top: 1px dashed white;
}
nav li a {
    display:block;
    text-decoration: none;
    color: #fff;
    padding: 2em;
    transform:rotate(180deg); <- other transforms are available :)
}

根据您的代码在此处摘录：https://codepen.io/29b6/pen/KKQZywz

使用 CSS 转换在 Chrome 和 Firefox 中呈现问题

Rendering Problem in BOTH Chrome & Firefox with CSS Transform

html

css

layout

vertical-alignment

css-transforms