JS在FF中很好，在Chrome中有bug

我構建了一個使用簡單JSon表和JS/JQ來呈現數據的頁面。在Chrome和FF上都可以正常工作。拆分爲單獨的HTML，CSS，JS和JSON文件，但是，Chrome中存在一個稍微變化的錯誤。JS在FF中很好，在Chrome中有bug

頁：http://www.lafairclough.co.uk/JTest/index.html

選擇從下拉兩個選項，並在圖表上應該顯示從兩輛車（從上到下的相對性能數據的權利：0-60，0-100，常委QTR和Top速度）。這些顏色用綠色代表更快的結果，橙色代表給定變量的畫圖。

這些圖表是使用Java來計算和設置一個CSS div寬度。然而，在Chrome中，這個div的寬度（有時，但經常）被計算得比預期的要高得多。作爲流量：

// Perf. BAR CHART SIZE CSS CAR A 
    $.getJSON("cars.json", function (data) { 

     $(document).ready(function() { 

      $('#dropdown1').change(function() { 
       var index = parseInt($(this).val()), 
        html = "<p class=\"barText\">" + " " + data.carList[index].model + " " + data.carList[index].variant + "</p>"; 
       $(".carA060").html(html); 
       var index = parseInt($(this).val()); 
       var num = data.carList[index].zero60 * 10; 
       $(".carA060").css('width', num + '%').show(); 
       html = "<p class=\"barText\">" + " " + data.carList[index].model + " " + data.carList[index].variant + "</p>"; 
       $(".carA0100").html(html); 
       var index = parseInt($(this).val()); 
       var num = data.carList[index].zero100 * 5; 
       $(".carA0100").css('width', num + '%').show(); 
       html = "<p class=\"barText\">" + " " + data.carList[index].model + " " + data.carList[index].variant + "</p>"; 
       $(".carAsQTR").html(html); 
       var index = parseInt($(this).val()); 
       var num = data.carList[index].sQTR * 5; 
       $(".carAsQTR").css('width', num + '%').show(); 
       html = "<p class=\"barText\">" + " " + data.carList[index].model + " " + data.carList[index].variant + "</p>"; 
       $(".carAvMAX").html(html); 
       var index = parseInt($(this).val()); 
       var num = data.carList[index].vMAX * 0.5; 
       $(".carAvMAX").css('width', num + '%').show(); 
      }); 

     }); 

    });

任何想法，爲什麼它會在Chrome中出現錯誤將非常感激。

感謝，

利。

來源

2013-09-01 user2737106

使用模板時，Luke –

當使用'parseInt（）'也添加基本值：'parseInt（$（this）.val（），10）' – slash197

也可以請包括您的問題錯誤從瀏覽器主機？ –

你在json中傳遞14.6（mazda）並將其乘以10的寬度，這就是爲什麼你是超出容器邊界改變寬度的計算邏輯，你會沒事的。並且爲什麼在Firefox中它的ok和chrome不是因爲每個瀏覽器都以不同的方式解析CSS。希望這可以幫助

來源

2013-09-01 11:04:41 Liran

謝謝！你是對的，我有兩套邏輯來改變CSS的寬度。 Firefox正在使用這個工具，而Chrome則使用了另一個與您指出的數學錯誤。非常感謝，我以爲我瘋了！原來我只是需要更多的睡眠：D – user2737106

歡迎您:) – Liran

JS在FF中很好，在Chrome中有bug

回答

相關問題