0

正如您从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;
4

2 回答 2

4

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

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

#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 版本中能提供更多的网页排版控件。

于 2013-02-24T20:14:32.667 回答
0

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

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

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

于 2013-02-24T20:03:47.440 回答