为什么我的管道模糊？

Question

我正在创建站点地图，由于某种原因，在所有浏览器上，不同的分隔管道具有不同的模糊度。

Chrome:

.header a {
  color: black;
  text-decoration: none;
}
.header li {
  display: inline-block;
}
.header li:after {
  content: "|";
  margin: 5px;
}

<div class="header">
  <ul>
    <li><a href="http://test.com">Mainpage</a></li>
    <li><a href="http://example.com">Handbook</a></li>
    <li><a href="http://amazon.com">About</a></li>
    <li><a href="http://place.com">Donate</a></li>
    <li><a href="http://obama.com">Forum</a></li>
  </ul>
</div>

有人可以帮我解决这个问题吗？很有道理。

Answer 1

Chrome 和 Firefox 使用不同的技术来呈现字体。这就是它们在每个浏览器中看起来不同（或多或少平滑和模糊）的原因。它在几个操作系统上也不同。

如果你需要它每次看起来都一致，你应该使用图像或 CSS border 属性和类似的。另一种选择是 CSS text-rendering.

Answer 2

从语义上讲管道 | 不是要走的路，因为它与您要完成的含义不同（在 Unix 术语中：将两个命令连接在一起，但也有数学术语等中的函数）。

您（误）将其用作分隔线，这是一种视觉（样式）元素。 chrki 使用边框的解决方案是最好的：

.header a {
  color: black;
  text-decoration: none;
}
.header li {
  display: inline-block;
  border-left: 1px solid black;
  margin-left: 5px;
  padding-left: 5px;
}
.header li:first-child {
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}

<div class="header">
  <ul>
    <li><a href="http://test.com">Mainpage</a></li>
    <li><a href="http://example.com">Handbook</a></li>
    <li><a href="http://amazon.com">About</a></li>
    <li><a href="http://place.com">Donate</a></li>
    <li><a href="http://obama.com">Forum</a></li>
  </ul>
</div>

ps：并且我加入了 "first-child" 以仅让分隔符出现在元素之间

ps2："Space between inline-block"-问题出现在这个解决方案中，可以在这里找到答案：A Space between Inline-Block List Items

为什么我的管道模糊？

Why are my pipes fuzzy?

html

css

pipe