Question

我正在尝试将一些文本放在一个圆形框中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条线。

希望你能帮忙！

由于

Answer 1

很有可能发生这种情况，因为计算时使用的字体不是您要求的自定义字体，因为在某些浏览器中自定义字体是异步加载的。

因此，当使用默认字体时，文本分为两行，但是当加载自定义字体时，它会显示在一行中。如果删除谷歌字体样式表，您将看到该字体在第一个和第三个菜单项中显示为两行。这就是chrome在DOMready上检测到的内容。

以下是没有自定义字体的原型的小提琴：http://jsfiddle.net/z7n7H/

要解决此问题，如果您知道没有菜单项应该换行，您可以在锚点上强制使用不间断的空格：

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

或尝试侦听字体加载事件（如果存在）并从那里进行计算：https://developers.google.com/webfonts/docs/webfont_loader

您也可以尝试使用与您使用的自定义宽度相同的默认字体，尽管这很容易破坏。

另一种选择是使用window.onload事件，因为字体应该已经下载并应用了。

Answer 2

使用图像会很好，因为你在Firefox和IE中破坏了样式，并且如果使用javascript为其分配填充的原因...如果你应用相同的

padding-bottom：36px; padding-top：36px;

它将是统一的P.S注意填充是针对<a href></a>标签

Answer 3

在任何可以使用的浏览器中使用它

   $('.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'})
   });

jQuery高度无法正常工作

3 个答案: