用javascript修复浏览器中头痛问题的方法整理篇[译]

作为网站的作者，我很高兴为大家分享这篇名为“用JavaScript修复浏览器中头痛问题的方法整理篇[译]”的文章，下面是一个详细的攻略，希望对你有所帮助。

章节解读

该文章分为以下八个章节，分别介绍了在浏览器端遇到的头痛问题以及解决方案。

1. 解决IE 6-8的min-height问题
2. 让表格滚动起来
3. 让placeholder属性兼容IE9以下
4. 改进润滑滚动
5. 当文本溢出时省略文字
6. 解决鼠标滚轮事件在Firefox上的问题
7. 系统二进制成一个64位整数
8. 解决IE z-index问题

解决IE 6-8的min-height问题

针对IE 6-8的min-height问题，可以使用JavaScript代码来解决。具体的代码可以参考下面的示例：

var minHeightFix = function(element) {
  element.style.height = "auto";
  if (element.scrollHeight > element.offsetHeight) {
    element.style.height = element.scrollHeight + "px";
  } else {
    element.style.height = element.offsetHeight - (element.scrollHeight - element.offsetHeight) + "px";
  }
};

var elements = document.querySelectorAll(".min-height-fix");
for (var i = 0; i < elements.length; i++) {
  minHeightFix(elements[i]);
}

让表格滚动起来

对于需要滚动的表格，可以使用一些JavaScript插件来解决。下面是一个示例代码：

$(document).ready(function () {
    $('#table-wrapper').scroll(function () {
        $('#table-header').scrollLeft($(this).scrollLeft());
    });
});

让placeholder属性兼容IE9以下

对于IE9以下浏览器无法支持placeholder属性的问题，可以通过JavaScript代码来解决。下面是一个代码示例：

$(document).ready(function(){
  $('input[placeholder]').each(function(){    
    var actualDefaultValue = $(this).attr('placeholder');
    if($(this).attr('type') == 'password'){
      var fakePassword = $('');
      fakePassword.insertBefore(this);
      fakePassword.outerWidth($(this).outerWidth());
      fakePassword.outerHeight($(this).outerHeight());
      fakePassword.css({
        'background-position-x': $(this).css('background-position-x'),
        'background-position-y': $(this).css('background-position-y'),
        'background-repeat': $(this).css('background-repeat'),
        'background-size': $(this).css('background-size'),
        'box-shadow': $(this).css('box-shadow'),
        '-moz-box-shadow': $(this).css('-moz-box-shadow'),
        '-webkit-box-shadow': $(this).css('-webkit-box-shadow'),
        'border-radius': $(this).css('border-radius'),
        '-moz-border-radius': $(this).css('-moz-border-radius'),
        '-webkit-border-radius': $(this).css('-webkit-border-radius'),
        'border-color': $(this).css('border-color'),
        'border-width': $(this).css('border-width'),
        'font-size': $(this).css('font-size'),
        'font-weight': $(this).css('font-weight'),
        'line-height': $(this).css('line-height'),
        'padding-left': $(this).css('padding-left'),
        'padding-right': $(this).css('padding-right'),
        'text-indent': $(this).css('text-indent')
      }).focus(function(){
        $(this).hide();
        $(this).prev().focus();
      });
      $(this).blur(function(){
        if($(this).val() == ''){
          $(this).hide();
          $(this).next().show();
        }
      });
      $(this).hide();
      $(this).removeAttr('placeholder');
    }
    $(this).val(actualDefaultValue);
  });
});

改进润滑滚动

下面是一个JavaScript代码示例，可以用来改进润滑滚动效果：

$(function(){
  $('a[href*=#]:not([href=#])').click(function(){
    if(location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname){
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if(target.length){
        var scrollTop = target.offset().top - 30;
        $('html,body').animate({scrollTop: scrollTop}, 1000);
        return false;
      }
    }
  });
});

当文本溢出时省略文字

对于文本溢出的问题，可以使用CSS样式中的text-overflow来解决。下面是一个示例代码：

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

解决鼠标滚轮事件在Firefox上的问题

下面是一个处理Firefox浏览器下鼠标滚轮事件的示例代码：

var normalizeWheel = function(event) {
  var PIXEL_STEP = 10;
  var LINE_HEIGHT = 40;
  var PAGE_HEIGHT = 800;
  var sX = 0, sY = 0, pX = 0, pY = 0;
  event = event || window.event;
  var delta = 0;
  if (event.type == 'mousewheel') {
    delta = event.wheelDelta / 120;
  } else if (event.type == 'DOMMouseScroll') {
    delta = -event.detail / 3;
  }
  sY = delta;
  if (event.axis && event.axis === event.HORIZONTAL_AXIS) {
    sX = sY;
    pX = pY;
  }
  return {
    spinX: sX,
    spinY: sY,
    pixelX: pX,
    pixelY: pY
  };
};

$(document).on('mousewheel DOMMouseScroll', function(event) {
  var delta = normalizeWheel(event.originalEvent).spinY;
  if (delta > 0) {
    // 向上滚动
  } else {
    // 向下滚动
  }
});

系统二进制成一个64位整数

下面是一个JavaScript代码示例，可以将32位整数转换成64位整数：

var getBinary64 = function(decimalNum) {
  var binaryArr = [];
  for (var i = 7; i >= 0; i--) {
    var binaryDigit = decimalNum % 2;
    binaryArr[i] = binaryDigit;
    decimalNum = Math.floor(decimalNum / 2);
  }
  return binaryArr.join('');
};

解决IE z-index问题

下面是一个JavaScript代码示例，可以解决IE浏览器下的z-index问题：

$(function(){
  var zIndexNumber = 1000;
  $('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
  });
});

以上就是对原文的详细讲解和示例代码的解释，希望对大家有所帮助。