为什么我的管道模糊？

Question

我正在创建一个站点地图，由于某种原因，所有浏览器上的不同分离管道都有不同的模糊性。

铬：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

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

Answer 2

从语义上讲，管道|不是一种可行的方式，因为它具有与你想要完成的不同的意义（用Unix术语来说：将两个命令组合在一起，但是也有数学术语等功能。）

你（错误地）将它用作分隔符，它是一个视觉（样式）元素。 chrki使用边框的解决方案最好：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

ps：我已经被扔进了一个孩子的第一个孩子＆＃34;只允许分隔符出现在元素之间

ps2：＆＃34;内联块＆＃34; -problem之间的空格出现在此解决方案中，可以在此处找到答案：A Space between Inline-Block List Items