2010-01-25 78 views
2

我有一個jquery/javascript代碼塊,它根據瀏覽器寬度設置圖像的左邊距。在IE瀏覽器中使用.css()操作jquery問題(bug?)

我做了一些總和來計算所需的左邊距,它進入var $ diff。

此代碼工作正常:

$('#background-wrapper>img').attr('alt',$diff); 

這表明的款項都做工精細的圖像與DIFF插入其alt屬性爲$正確的值結束。這適用於IE,FF,Chrome。

但是,如果我的代碼更改爲:

$('#background-wrapper>img').css('margin-left',$diff); 

那麼Firefox和Chrome做工精細,使用$ DIFF爲左緣,因爲我想要的圖像值,但IE引發運行時錯誤和停止運行腳本,引用jquery文件中的無效參數。我使用的是jquery 1.3.2.min。

任何想法?

繼承人爲全功能的代碼。

function imageResizeCenter() { 
    var $windowh = jQuery(window).height(); 
    var $windoww = jQuery(window).width(); 

    var imagesrc = $('#background-wrapper2>img').attr('src'); 

    var myimage = new Image(); 

    myimage.src = imagesrc; 
    var $width = myimage.width; 
    var $height = myimage.height; 

    var $ratio = parseInt($width,10)/parseInt($height,10); 

    var $newwidth = parseInt($windowh,10)*$ratio; 

    var $diff = (parseInt($windoww,10)-parseInt($newwidth,10))/2; 
    if($diff<0) $diff=0; 
    $('#background-wrapper2>img').attr('height',$windowh).css('margin-left',$diff); 

} 
+0

有什麼特別之處圖像或背景的包裝?我在IE6,IE7,IE8和FF3中嘗試了這個確切的腳本,並且我沒有得到任何錯誤。 – attack 2010-01-26 03:33:58

+0

我不認爲這有什麼奇怪的......背景div只是一個100%寬度和高度div,絕對定位坐在網站的其餘部分後面。 該圖像是多個圖像中的一個,除了一組圖像外,其餘都顯示爲:無。 最終結果是在網站的背景中全屏(或大中心)圖像的幻燈片放映。 我在背景div中使用圖像,而不是實際的背景圖像CSS,以便在使用幻燈片顯示過渡到圖像前,可以使圖像預加載。 – petesiss 2010-01-27 11:06:04

回答

1

也許

$('#background-wrapper>img').css('margin-left',$diff + 'px'); 
+0

+1。我猜想單位的缺乏在某些瀏覽器中是個問題。 – 2010-01-25 16:18:37

+0

謝謝你們的回覆。我剛剛嘗試了所有這些建議,並且chrome/ff對於所有這些vaients都顯得很滿意,但IE仍然給出相同的錯誤 - 即使我只是將屬性更改爲marginLeft。 – petesiss 2010-01-25 16:29:56

+0

你可以發佈你的JavaScript代碼和標記,或它的一個片段嗎? – 2010-01-25 16:46:31

0

使用JavaScript設置CSS屬性有一點需要注意:不要使用破折號分隔多字的屬性,可以使用駝峯規則。所以margin-left應該marginLeft ...

$('#background-wrapper > img').css('marginLeft', $diff); 
+1

虛線和駝峯版本都可以運行: 「此外,jQuery可以同樣解釋多字屬性的CSS和DOM格式。例如,jQuery可以理解並返回.css('background-color')和的CSS( '的backgroundColor')「。 http://api.jquery.com/css/ – 2010-01-25 16:41:44