jquery/javascript设置宽度失败

我遇到了这个问题： 根据来自的数字，我想创建一个条形图。有趣的是，它在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);
}

我尝试了所有的FF，IE8在不同的设置和歌剧，它根本不工作。之后，该条的宽度立即设置为零。有趣的是，IE8怪癖模式是有效的

我很确定这只是我的愚蠢，但我会感谢你的帮助。我还尝试使用.css来更改大小，但也不起作用

---

提前非常感谢。

在哪里可以买到maxval？它可以是null、nan或零。无论哪种方式，都会出现错误。

从哪里获得maxval？它可以是null、nan或零。无论哪种方法都会出现错误。

尝试添加target.css'width'，width+px

---

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

尝试添加target.css'width'，width+px

---

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

解决方案实际上非常简单。IE以外的其他浏览器正确地遵循了box模型。这意味着您不能设置内联元素的宽度。您使用的条形图是跨度图元，这些图元设置为“显示：内联”

---

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

解决方案其实非常简单。IE以外的其他浏览器正确地遵循了box模型。这意味着您不能设置内联元素的宽度。您使用的条形图是跨度图元，这些图元设置为“显示：内联”

---

---

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

我认为问题可能在于span标签的使用。您应该使用div。Span标记忽略宽度。

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

console.log您的所有数学公式，以确保它们都计算为实际数值，而不是NaN或字符串。IE中的一些奇数处理（如除以零）存在细微差异。我使用IE开发工具条、firebug和opera的dragonfly来逐步完成代码，我总是有正确的或至少是正确的外观；对于整数值和简单分数，它可以处理所有变量中的值。顺便说一句，开发工具和蜻蜓报告的宽度为零，firbug目前声称为40px。更改宽度之前/之后的console.log为item.width提供了合理的值。可见性报告为“可见”。萤火虫。我还没有找到如何从jQuery.console.log中读取CSS，以确保它们都被计算为实际的数值，而不是NaN或字符串。IE中的一些奇数处理（如除以零）存在细微差异。我使用IE开发工具条、firebug和opera的dragonfly来逐步完成代码，我总是有正确的或至少是正确的外观；对于整数值和简单分数，它可以处理所有变量中的值。顺便说一句，开发工具和蜻蜓报告的宽度为零，firbug目前声称为40px。更改宽度之前/之后的console.log为item.width提供了合理的值。可见性报告为“可见”。萤火虫。我还没有找到如何从jQuery中读取CSS；如果value>averagevalue{maxval=value；}否则{maxval=averagevalue；}行45等，其中value和averagevalue都是'globals'行29等。；当我逐步浏览代码时，所有内容都已定义：|另外：它无法解释为什么它在怪癖模式下工作？如完整示例所示：var maxval；如果value>averagevalue{maxval=value；}否则{maxval=averagevalue；}行45等，其中value和averagevalue都是'globals'行29等。；当我一步一步地看代码时，所有的东西都被定义了：|而且：它不会解释为什么它在怪癖模式下工作？除了事后看来确实是一个明显的错误，它没有工作我担心它甚至不是一个真正的错误，我假设jquery无论如何都会将它默认为px。我只是在抓救命稻草真的：呸，试试$target？只是一种预感。如果这能奏效的话，我会好奇为什么怪癖模式不在乎呵呵。很抱歉，没有解决问题：或者我甚至无法正确编写最简单的JavaScript。您是否已经尝试过不将元素分配给变量并使用jquery s

---

选民呢？不管怎么说，这似乎是几行不必要的代码。除了事后看来确实是一个明显的错误外，它没有起作用。我担心这甚至不是一个真正的错误，我认为jquery无论如何都会将其默认为px。我只是在抓救命稻草真的：呸，试试$target？只是一种预感。如果这能奏效的话，我会好奇为什么怪癖模式不在乎呵呵。很抱歉，没有解决问题：或者我甚至无法正确编写最简单的JavaScript。您是否已经尝试不将元素分配给变量，而是使用jquery选择器？不管怎么说，好像有几条不必要的线路。我当然没有想到。这是一堂关于谦逊、关注细节以及怪癖的课。谢谢你，米尔斯·罗斯，你真的帮我解决了这个问题。哈！天才不错，我被难倒了。我当然没有想到。这是一堂关于谦逊、关注细节以及怪癖的课。谢谢你，米尔斯·罗斯，你真的帮我解决了这个问题。哈！天才很好，我被难住了。谢谢你对忽略跨度宽度背后的动机做了更详细的解释。我接受另一个答案的原因很简单，因为我是第一个看到它的。谢谢你对忽略跨度宽度背后的动机做了更详细的解释。我接受另一个答案的原因很简单，就是我首先看到了它。