Question

我正在使用单页Web应用程序书，其中的第一个示例在Chrome中无法正常运行，但在Firefox中可以正常工作。基本代码如下：

.spa-slider {
  position: absolute;
  bottom: 0;
  right: 2px;
  width: 300px;
  height: 16px;
  cursor: pointer;
  border-radius: 8px 0 0 0;
  background-color: #f00;
}

JavaScript代码如下：

var spa = (function($) {
  var configMap = {
    extended_height: 434,
    extended_title: 'Click to retract',
    retracted_height: 16,
    retracted_title: 'Click to extend',
    template_html: '<div class="spa-slider"></div>'
  },
      $chatSlider, toggleSlider, onClickSlider, initModule;

  toggleSlider = function() {
    var slider_height = $chatSlider.height();

    console.log("slide_height: " + slider_height);

    if (slider_height == configMap.retracted_height) {
      $chatSlider.animate({height: configMap.extended_height})
          .attr('title', configMap.extended_title);
      return true;
    }
    if (slider_height == configMap.extended_height) {
      $chatSlider.animate({height: configMap.retracted_height})
          .attr('title', configMap.retracted_title);
      return true;
    }
    return false;
  };

  onClickSlider = function(event) {
    toggleSlider();
    return false;
  };

  initModule = function($container) {
    $container.html(configMap.template_html);
    $chatSlider = $container.find('.spa-slider');
    $chatSlider.attr('title', configMap.retracted_title)
        .click(onClickSlider);
    return true;
  };

  return {initModule: initModule};
}(jQuery));

jQuery(document).ready(function() {
  spa.initModule(jQuery('#spa'));
});

我的问题基本上如下。滑块似乎无法在Chrome上运行，因为console.log("slide_height: " + slider_height);会打印17，因此它与if警卫都不匹配。在Firefox上它打印16，因此height（）属性获取正确的值。任何人都可以解释为什么会发生这种情况以及编写代码的可移植方式是什么？

更新：我在Chrome上使用90％缩放并将其更改为100％似乎可以使代码正常运行。但是，代码应该清楚地适用于所有缩放级别，那么如何实现呢？我很惊讶这本书使用的代码非常脆弱。

Chrome中的高度不匹配

0 个答案: