Question

我构建了一个页面，它使用一个简单的JSon表和JS / JQ来呈现该数据。在一张纸上托管在一起，它可以在Chrome和FF中正常工作。分为单独的HTML，CSS，JS和JSON文件，然而，Chrome中存在一个稍微变化的错误。

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

从下拉列表中选择两个选项，右侧的图表应显示两辆车的相对性能数据（从上到下：0-60,0-100，站立Qtr和最高速度）。这些颜色编码为绿色表示结果较快，橙色表示给定变量的绘图。

使用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中出错的想法都会非常感激。

谢谢，

利。

Answer 1

你正在你的json中传递14.6（马自达）并将它乘以10的宽度，这就是为什么你是超出容器范围改变宽度计算的逻辑，你会没事的。之所以在火狐中它的ok和chrome不是因为每个浏览器以不同的方式解析CSS。希望这有帮助

FF中的JS Fine，在Chrome中出现问题

1 个答案: