跨浏览器高度功能 - jquery答案

【问题标题】：Cross browser height function - jquery跨浏览器高度功能 - jquery
【发布时间】：2012-05-17 22:46:52
【问题描述】：

我有一系列要设置高度的表格单元格。这一切似乎都运行良好，但不幸的是，Firefox 在整体高度上添加了边框，而其他浏览器似乎没有。

因此我想知道是否有人知道一个 jquery 函数/插件，它将在浏览器之间一致地设置高度，而不管板、填充等。

干杯安东尼

更新：我只是加倍检查，我正在使用以下文档类型：

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

【问题讨论】：

您是否确保您始终处于或不处于怪癖模式？这很重要，因为盒子模型很重要。

标签： javascript jquery css

【解决方案1】：

我不知道任何“官方”插件，但使用你自己的插件应该不难：

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 规则保存在样式表中，这应该可以工作。

【讨论】：

这是一个聪明的方法。我想你不会看到故障，但如果确实发生了，那将是唯一的缺点。

【解决方案2】：

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

浏览器嗅探很糟糕，但天真地，我们可以嗅探 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();

【讨论】：

【解决方案3】：

您是要更改单个 TD 还是整行？如果是后者，一个简单的、不显眼的方法，使用较少的 jquery 运行时间，将在样式表中预设高度作为 TR 的子项。

<style>

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

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

</style>

现在您所要做的就是使用逻辑来点击 TR 标签而不是所有 TD 标签，而且 CSS 更容易跨平台控制/预测。

$(someTRpointer).toggleClass('preferred-height');

好处是，一旦击中 TR，整行就会一起改变。这个跨平台我用过很多次。

【讨论】：