Javascript 跨浏览器高度函数-jquery_Javascript_Jquery_Css

Javascript 跨浏览器高度函数-jquery

javascript jquery css

Javascript 跨浏览器高度函数-jquery,javascript,jquery,css,Javascript,Jquery,Css,我有一系列的表格单元格，我正试图设置它们的高度。这一切似乎都很好，但不幸的是，Firefox在整体高度上增加了边框，而其他浏览器似乎没有这样做因此，我想知道是否有人知道jquery函数/插件可以在浏览器之间设置一致的高度，而不考虑板、填充等干杯安东尼更新：我刚刚进行了双重检查，我正在使用以下文档类型： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&g

我有一系列的表格单元格，我正试图设置它们的高度。这一切似乎都很好，但不幸的是，Firefox在整体高度上增加了边框，而其他浏览器似乎没有这样做

因此，我想知道是否有人知道jquery函数/插件可以在浏览器之间设置一致的高度，而不考虑板、填充等

干杯安东尼

更新：我刚刚进行了双重检查，我正在使用以下文档类型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

我不确定您是否能找到一个插件来实现这一点，但制作一个插件可能并不难：

浏览器嗅探是不好的，但很简单，我们可以嗅探mozilla，计算影响大小的总水平边框，然后从传入的值中减去

下面是一些伪代码：

function totalPixelsAddedIntoCountByMozilla() {
  //for you to define.
}

(function($){
  $.fn.extend({
    tableHeight: function(new_height) {

      if($.browser.mozilla) {
        return this.each(function(){
          $(this).height(new_height - totalPixelsAddedIntoCountByMozilla());
        };
      }

      return this.each(function(){
        $(this).height(new_height);
      };
    }
  });
})(jQuery);

然后使用

$（）.tableHeight（）

而不是

$（）.height（）
我不知道有任何“官方”插件，但使用您自己的插件应该不难：
jQuery.fn._height = jQuery.fn.height

jQuery.fn.height = function( val )
{
    if ( arguments.length === 0 ) return this._height();

    this.css( {'padding': '0px', 'border-width': '0px'} );

    this._height( val );

    this.css( {'padding': '', 'border-width': ''} );

    return this;
};

这段代码取决于您没有定期在元素上设置内联样式，因为这将覆盖它们。如果将所有css规则保留在样式表中，则应该可以使用。
是否更改单个TDs或整行？如果是后者，一种简单而不引人注目的方法（jquery运行时更少）是将样式表中的高度预设为TR的子级
<style>

#SomeTableorDivId TR TD {height:someheight; border:0; etc;}

#SomeTableorDivId TR.preferred-height TD {height:newheight; border:0; etc;}

</style>

这样做的好处是，一旦命中TR，整行都会一起更改。我经常使用这种跨平台模式。您是否确保始终处于怪癖模式？这很重要，因为盒子模型很重要。这是一个聪明的方法。我想你不会看到小故障，但如果真的发生了，那将是唯一的缺点。
$(someTRpointer).toggleClass('preferred-height');