jquery/javascript 설정 너비가 잘못되었습니다.

Question

이 문제가 발생했습니다 : 숫자에 따라 막 대형 차트를 만들고 싶습니다. 흥미롭게도 IE8에서 쿼크 모드를 사용하면 매우 잘 작동하지만 다른 곳에서는 실패합니다. 나는 그 실수가 어디에 있는지 정말로 말할 수 없으며 여기서 누군가가 나를 도울 수 있기를 바랍니다. 내가 jQuery를 사용하지만,에서 getElementById()와 element.style.width = someValue와를 사용하고 있습니다 (jQuery를하지 않고 예) 작동하지 않았다 중 하나 :(

[편집 :. 제거 전체 예를 링크하며 pastie이 만료]

기본적으로 :..

<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을 모두 시도하고 간단하게 작동하지 않는 바의 폭 직후 0으로 설정 IE8 모드는 흥미롭게도, 작동 쿼크

. 나는 그것이 단지 내가 바보 인 것을 꽤 확신한다. 그러나 나는 appre 할 것이다. 이것을 도와주세요. 나는 또한 .css()를 사용하여 크기를 변경하려고 시도했으나 작동하지 않았다.

미리 감사드립니다.

Answer 1

문제는 span 태그를 사용하는 것일 수 있습니다. 대신 div를 사용해야합니다. 범위 태그는 너비를 무시합니다.

Answer 2

어디에서 maxval을 얻을 수 있습니까? null, nan 또는 0 중 하나입니다. 어느쪽으로 든 거기에 오류가 발생합니다.

Answer 3

시도 추가 target.css ('폭', 폭 + "픽셀")보다

다른, 나는 어떤 명백한 오류를 볼 수 없습니다.

Answer 4

실제로 솔루션은 실제로 매우 쉽습니다. IE 이외의 다른 브라우저는 상자 모델을 올바르게 따른다. 즉, 인라인 된 요소의 너비를 설정할 수 없습니다. 사용중인 막대는 SPAN 요소이며 display:inline

으로 설정되므로 SPAN 대신 DIV를 사용하거나 .animbars 및 .avgbars CSS 선언에 display:block을 추가 할 수 있습니다. 의도 한 시각적 디자인을 깨뜨릴 수 있지만 트랙에 다시 올려 놓기가 너무 어려워서는 안됩니다.