Question

我在我的网络应用程序中使用jRating插件。该应用程序在正常情况下工作正常，但当我放大（CTRL +）浏览器（Chrome）窗口时，最后会添加一个额外的星标。以下是一个示例：fiddle。

<div class="exemple3" data-average="20" data-id="3"></div>

  $(document).ready(function(){
    $(".exemple3").jRating({
      step:true,
      length : 20, // nb of stars
      decimalLength:0, // number of decimal in the rate
        bigStarsPath: 'http://demos.myjqueryplugins.com/jrating/jquery/icons/stars.png'  
    });
  });

如果放大浏览器窗口，会添加一个小星星，从而增加显示的星星数量。我认为这个css属性可能导致问题：

background: url(http://demos.myjqueryplugins.com/jrating/jquery/icons/stars.png) repeat-x;

有关如何解决此问题的任何建议？

Answer 1

这通常是jRating中的问题，并且似乎是由舍入引起的。

如果我在Chrome中放大到125％，则20个星的宽度需要550px（通过屏幕上的标尺测量）但是包含星星的div是575px宽。星图像宽23px。缩放后，星星的宽度应为23px * 1.25 = 28.75px，因此总共占用28.75px * 20 = 575px。但如果28.75px缩小到28px那么星星会占用28px * 20 = 560px。

这似乎不会影响Firefox，但Safari与Chrome有同样的问题。

有关此问题的Chromium错误：https://code.google.com/p/chromium/issues/detail?id=264863。它已在WebKit中修复，但仅限于最近（2014年4月），尚未进入Chrome。

不幸的是，似乎要解决此问题，您可能需要编辑jRating插件以使用一系列img元素而不是背景图像。您可以尝试在Chrome中缩放this JSFiddle以查看可行的内容。

jating：浏览器放大时显示的星数不正确

1 个答案: