1

我遇到了这个问题：根据我想创建条形图的数字。有趣的是，它在 IE8 的怪癖模式下运行良好，但在其他任何地方都失败了。我真的不能说错误在哪里，我希望这里有人可以帮助我。我正在使用 jQuery，但使用 getElementById() 和 element.style.width = Somevalue（即没有 jQuery）也不起作用:(

[编辑：删除了完整的示例链接；馅饼过期了。]

基本上：

<input onChange="calculateField(1)" ...>

function calculateField(fieldname){
    value = $("#input_" + fieldname).val();
    fancyMagic();
    value = 6 * value; // for testing

    $("#subtotal_" + fieldname).html(value);
    updateDiagram();
}

function updateDiagram(){
    // gather required into, maxwidth, maxval, etc...

    // fetch 'normal' bar
    var target = $("#animatebar_1");
    var width = maxwidth * (value / maxval);

    // set width to proper width
    target.width(width);

    // like for avg bar
    var avgtarget = $("#avgbar_1");
    var avgwidth = maxwidth * (averagevalue / maxval);
    avgtarget.width(avgwidth);
}

我在各种设置和 Opera 中尝试了所有 FF、IE8，但它根本不起作用。栏的宽度在之后立即设置为零。有趣的是，IE8 怪癖模式有效。

我很确定这只是我愚蠢，但我会很感激这方面的帮助。我也尝试使用 .css() 来更改大小，但它也不起作用。

非常感谢您提前。

4

4 回答 4

4

我认为问题可能是跨度标签的使用。您应该改用 div 。跨度标签忽略宽度。

于 2009-12-01T16:28:07.173 回答
3

解决方案其实很简单。IE 以外的其他浏览器正确地遵循盒子模型。这意味着您不能设置内联元素的宽度。您正在使用的栏是 SPAN 元素，这些元素设置为display:inline

所以解决方案是使用 DIV 而不是 SPAN，或者同时添加display:block.animbars 和 .avgbars CSS 声明。它可能会破坏您预期的视觉设计，但要让它回到正轨并不难。

于 2009-12-01T16:24:15.477 回答
0

尝试添加 target.css('width', width + "px")

除此之外，我看不到任何明显的错误。

于 2009-12-01T15:28:17.133 回答
0

你在哪里得到maxval？它要么为空，要么为零。无论哪种方式，你都会在那里出错。

于 2009-12-01T15:20:05.643 回答