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 プロパティを完全に削除すると、最後の文字の後にスペースがないことがわかります ( 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 バージョンで Web ページのタイポグラフィの制御が増えることを期待しているケースです。

于 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 に答える