Chrome＆amp; amp;带有CSS变换的Firefox

发布于 2025-02-01 15:13:08 字数 1745 浏览 2 评论 0原文

尽管有时在这里或那里的像素必须被原谅和遗忘。
但是在此示例中，这个简单的菜单需要完美地渲染像素！
也就是说，菜单项之间的差距必须完全相等。
在我的示例中而其他人则相距太远。这是一团糟。晚上睡觉后，
我得出的结论是，这是生活座右铭
的情况之一接受您所遇到的一切都不能被接受，设计师必须立场。

无论是虚线还是坚固的线，问题都发生在我接近它的每一个中。
将保证金设置为-1px并添加1PX的边框无法解决此问题。
这两个示例都是由2022年最新版本的Chrome和Firefox制成的。

有一种方法可以用相等，精确的像素化/混叠的尖锐线分开项目，而没有模糊的反陈词滥调模糊线的看似随机厚度要发生吗？

您可以完全重写它，或使用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>

原文

Although sometimes a pixel here or there must be forgiven and forgotten.
But in this example this simple menu's need to be rendered pixel-perfectly!
That is to say, the gaps between the menu items must be exactly equal.
In my example all menu separators looks ugly and fuzzy and disoriented as some items melt together.
While others are too far apart. Its a mess. After a nights sleeping,
I have come to the conclusion that this is one of those scenario's where the life's motto
of accepting whatever comes at you cannot be accepted and a designer must take a stand.

Whether its a dashed or solid line, the problem occurs in each and every whay I approach it.
setting margins to -1px and adding a border of 1px does not fix this.
Both examples are made from the newest version of Chrome and Firefox in 2022.

Is there a way we can separate the items with an equal, exact pixelated/aliased sharp line, without the vague anti-aliased fuzzy line of seemingly random thickness to happen?

You are allowed to rewrite it entirely or use flexbox or any other elegant CSS solution!

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

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

女皇必胜 2025-02-08 15:13:08

当您开始将转换应用于它们所应用的元素时，边界可能会很贴心，因此请从包含的＆lt; li＆gt; elements中删除transform：scale（-1）转换＆lt; a＆gt;而不是

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：> https：> https：> https： //codepen.io/29b6/pen/kkqzywz

Borders can be fiddly when you start applying transforms to the element they are applied to, so remove the transform:scale(-1) from the containing <li> elements and transform the <a> instead:

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 :)
}

Snippet here based on your code: https://codepen.io/29b6/pen/KKQZywz

回复收藏 0 原文

~没有更多了~