0

100px x 100px の丸いボックスの中央にテキストを配置しようとしています。

私が取り組んでいるサイトはこちらです: http://www.blackcountrydesigns.co.uk/the1theme/

これを達成するために、次のjQueryスクリプトを使用しています

$(document).ready(function()
{
   $('.header .menu li a').each(function(){
      padding = (100 - $(this).innerHeight())/2
      alert($(this).height());
      $(this).css({'padding-top' : padding+'px' , 'padding-bottom' : padding+'px'})
   });

});

私が抱えている問題は、ボックスの一部または2行が1つだけであると考えていることです。

あなたが助けてくれることを願っています!

ありがとう

4

3 に答える 3

1

これは、一部のブラウザではカスタム フォントが非同期で読み込まれるため、計算時に使用されるフォントが要求しているカスタム フォントではないために発生する可能性が非常に高いです。

そのため、デフォルト フォントを使用するとテキストは 2 行で表示されますが、カスタム フォントを読み込むと 1 行で表示されます。Google フォントのスタイルシートを削除すると、1 番目と 3 番目のメニュー項目内にフォントが 2 行で表示されます。これは DOMready で chrome が検出するものです。

これは、カスタム フォントを使用しないプロトタイプのフィドルです: http://jsfiddle.net/z7n7H/

これを解決するには、どのメニュー項目も改行しないことがわかっている場合、アンカーに改行しない空白を強制することができます。

.header .menu li a{ white-space: nowrap }

または、フォント読み込みイベント (存在する場合) をリッスンして、そこから計算を実行してみてください: https://developers.google.com/webfonts/docs/webfont_loader

使用しているカスタム フォントと同じ幅のデフォルト フォントを使用することもできますが、これは非常に簡単に壊れる可能性があります。

別のオプションは、window.onloadイベントを使用することです。それまでにフォントがダウンロードされて適用されているはずだからです。

于 2012-08-18T20:56:30.520 に答える
0

スタイルが Firefox と IE 内で壊れているので、画像を使用するとよいでしょう。

パディング-ボトム: 36px; パディングトップ: 36px;

それは均一になりますPSメモパディングは<a href></a>タグ用です

于 2012-08-18T20:57:07.533 に答える
0

動作するブラウザでこれを使用します

   $('.header .menu li a').each(function(){
      var a=$('.header .menu li').height(); 
       alert(a);
     var padding = a-65;

      $(this).css({'padding-top' : padding+'px' , 'padding-bottom' : padding+'px'})
   });
于 2012-08-18T21:06:19.597 に答える