jQuery Height 无法正常工作

jQuery Height not working corrently

本文关键字：工作 常工作 Height jQuery      更新时间：2023-09-26

我试图将一些文本居中放在一个 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'})
   });
});

我遇到的问题是，当某些盒子仅在一个框上时，它认为某些框或行上

。

希望你能帮到你！

谢谢

这

很可能是因为进行计算时使用的字体不是您请求的自定义字体，因为自定义字体在某些浏览器中是异步加载的。

因此，当

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

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

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

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

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

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

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

一个，当你的样式在 Firefox 和 IE 中被破坏时，使用一个图像会很好，如果为什么使用 javascript 为其分配填充......如果你应用相同的

底部填充：36px;顶部填充：36px;

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

的
在任何

浏览器中使用它都可以工作 

   $('.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'})
   });
相关文章：