フォントフェイスを使用したときのjQueryの位置ずれ

私はシンプルなメニューを作っていますが、なぜserif以外のフォントを使用しているときに正しく整列していないのかわかりません。フォントフェイスを使用したときのjQueryの位置ずれ

もちろん、これは他のソースコードに組み込まれているので、「どうしてこれらのものを使って右揃えリンクのリストを作るのですか」と言っても意味がありません。

<style type="text/css"> 
     html, body { 
      overflow-x:visible; 
     } 
     body { 
      margin:0; 
      padding:0; 
      background:#111; 
     } 
     ul#menu { 
      margin-top: 30px; 
      padding: 0px; 
      list-style: none; 
      font-size: 1.1em; 
      clear: both; 
      float: right; 
      width: 150px; 
      padding-right:20px; 
     } 
     ul#menu li { 
      margin: 0; 
      padding: 0; 
      overflow: hidden; 
      float: right; 
      height:40px; 
     } 
     ul#menu a, ul#menu span { 
      padding: 10px 20px; 
      float: left; 
      text-decoration: none; 
      text-transform: none; 
      clear:none; 
      position:relative; 
      height: 20px; 
      line-height: 20px; 
     } 
     ul#menu a { 
      padding-right:20px; 
      border-bottom:0; 
      margin-right:-300px; 
      color: #a40800; 
     } 
     ul#menu span { 
      display:block; 
     } 

    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#menu li").prepend("<span></span>"); //Throws an empty span tag right before the a tag 

      $("#menu li").each(function() { //For each list item... 
       var linkText = $(this).find("a").html(); //Find the text inside of the a tag 
       $(this).find("span").show().html(linkText); //Add the text in the span tag 
       var width = $(this).find("a").outerWidth();//Find the width of the link 
       $(this).find("span, a").css({ 
        'left' : '-'+width+'px', 
        'color' : '#a0c0f0', 
        'font-family' : 'serif' 
       }); 
      } 
      ); 
     }); 
    </script> 
</head> 
<body> 
    <ul id="menu"> 
     <li> 
      <a href="#item1">asdqwe</a> 
     </li> 
     <li> 
      <a href="#item2">asdqaesd</a> 
     </li> 
     <li> 
      <a href="#item3">xcvsd</a> 
     </li> 
     <li> 
      <a href="#item4">qweasd</a> 
     </li> 
     <li> 
      <a href="#item5">ddfgdfgrwe</a> 
     </li> 
</body>

あなたは「フォントファミリ」を変更する場合：「フォントファミリ」から「セリフ」：「ゴシック」（または私は推測する他のフォント）、それはもはや整列されていません。

手がかり/修正？事前に

おかげ

出典：最初の答えの後this tutorial

EDITの適応は： [OK]をので、私はそれがArialのためにそれを解決しますね。問題は、私が@ font-faceを使っているということです：

@ font-face { font-family： 'QuicksandLight'; src：url（ 'Quicksand_Light-webfont.eot'）; url（ 'Quicksand_Light-webfont.woff'）形式（ 'woff'）、 URL（ 'Quicksand_Light-webfont.eot？#iefix'）形式（ 'embedded-opentype'）、 url 。 ''）format（ 'truetype'）、 url（ 'Quicksand_Light-webfont.svg＃QuicksandLight'）形式（ 'svg'）; font-weight：normal; font-style：normal; }

さらに、font-family： 'QuicksandLight'を追加しました。 ul＃メニューに戻っても問題は解決されません。

次の手順は何ですか？とにかくあなたの答えをありがとう:)

出典

2011-05-28 Ben Dover

あなたは、フォントを変更して幅を変更するので、あなたは、リンクの幅を取得するためにouterWidth()を呼び出す前に、ご希望のフォントを設定する必要があります。

.css()コールのその部分をouterWidth()コールの上に移動することでこれを行うことができますが、おそらくJavascriptでフォントを変更せずにCSSでフォントを設定するほうがよいでしょう。

@font-faceフォントの問題は、jQueryの実行時にブラウザがまだフォントを読み込んでいないように思えます。ブラウザがスクリプトの実行前にすべての読み込みを完了していることを確認するために、$(document).readyの代わりに$(window).loadを実行するようにjQueryコードを変更してみてください。

出典

2011-05-28 02:43:36

あなたの答えをありがとう。単純なArialフォントやVerdanaフォントの代わりに実際に@ font-faceを使用しています。詳細を確認してください –

フォントフェイスを使用したときのjQueryの位置ずれ

答えて

関連する問題