Question

我遇到过这个问题：根据我想要创建条形图的数字。有趣的是，它在基于怪癖模式的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（）来改变大小，但它也没有用。

提前多多谢谢你。

Answer 1

我认为问题可能是使用span标签。你应该使用div代替。 Span标签忽略宽度。

Answer 2

解决方案实际上非常简单。除IE之外的其他浏览器正确遵循框模型。这意味着您无法设置内联元素的宽度。您使用的栏是SPAN元素，它们设置为display:inline

因此，解决方案将使用DIV而不是SPAN，或者为.animbars和.avgbars CSS声明添加display:block。它可能会打破你想要的视觉设计，但它不应该如此难以让它回到轨道上。

Answer 3

你在哪里获得maxval？它可以是null，nan或者零。无论哪种方式，你都会遇到错误。

Answer 4

尝试添加target.css（'width'，width +“px”）

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

jquery / javascript设置宽度失败

4 个答案: