Question

正如您在JSFiddle中看到的那样，如果您将鼠标悬停在文本上，则一侧与另一侧之间的空间更大，我该如何解决此问题。

我的问题的HTML如下：

<div id="mission"><a href="#">Our Mission</a></div>

CSS如下：

 #mission{
 -webkit-font-smoothing: antialiased;
  display:inline-block;
  font: 800 1.313em "proxima-nova",sans-serif; 
  padding: 30px 30px;
  margin-top:150px;
  letter-spacing: 8px;
  text-transform: uppercase;
  font-size:3.125em;
  text-align: center; 
  line-height: 1.45em;
  position: scroll;
  background-color:black;
 }

#mission a{
color:#fff;
text-decoration: none;

 }

#mission a:hover{
color:;
text-decoration: none;
cursor:pointer;
background-color:green;

Answer 1

这种行为主要是因为规范（据我所知）在使用letter-spacing属性时对文本的行为非常模糊。目前还不完全清楚该属性是否只应处理字母之间的空格，或者是否在每个字母后应用间距。

在这种情况下，间距似乎在每个字母之后。例如，通过完全删除字母间距属性，您可以看到最后一个字母后面没有空格（fiddle）

#mission{
    -webkit-font-smoothing: antialiased;
        display:inline-block;
      font: 800 1.313em "proxima-nova",sans-serif; 
      padding: 30px 30px;
      margin-top:150px;
      text-transform: uppercase;
        font-size:3.125em;
        text-align: center; 
        max-width: 606px;
        line-height: 1.45em;
        position: scroll;
        background-color:black;
}

据我所知，对此没有具体的解决方法。围绕它的黑客攻击可能是为文本添加一个负边距，使边缘更接近文本的右侧。除此之外，这是一个希望在未来的CSS版本中更多地控制网页排版的案例。

Answer 2

您可以将左边距填充添加到锚标记。

#mission a{
    color:#fff;
    text-decoration: none;
    padding-left: 0.15em;
}

http://jsfiddle.net/QJwy9/1/

文本比另一侧更倾向于一侧

2 个答案: