2015-01-03 58 views
0

我得到一個非常有趣的毛刺都在Safari和Firefox與以下的jsfiddle:1像素,在某個窗口偏置寬度

http://jsfiddle.net/68gcy2gp/

你必須點擊紅色框切換藍色覆蓋。

我有兩個左浮動相對位置li元素寬度爲32%1%右邊距。然後,我在li元素上放置一個div元素,位置absolute,頂部/左邊爲0。這個div的寬度將被設置爲與32%li(通過jQuery)相同的寬度。

在某些屏幕寬度上,我得到1px的毛刺(太長或太短)。這樣的屏幕截圖顯示了它:

1px glitch from JS fiddle example

我怎樣才能防止這種故障?

+1

您發佈的小提琴看起來與您在問題中發佈的圖像完全無關。 – Pointy

+0

@Pointy:對我來說,它在1920 x 1200像素的firefox – Tyr

+0

@Tyr上,所以你點擊那個jsfiddle鏈接,你會在紅色的盒子上看到一個藍色的盒子? – Pointy

回答

1

好了,作爲一個正式的答案:

的jQuery .WIDTH()或.innerWidth()被舍入子像素的寬度爲下一個整數值或者與地板或小區,根據值。要避免這種情況,可以用一些原始的javascript:

$('.person').each(function() { 
    var front = $(this).find('.front'); 
    var back = $(this).find('.back'); 
    var link = $('<a href="#"></a>'); 

    link.on('click', function() { 
     var width = $(front)[0].getBoundingClientRect().width; 
     back.innerWidth(width); 
     back.toggle(); 
    }); 

    $(this).wrap(link); 
    back.hide(); 
}); 

下面的函數是通過調整與主動疊加的窗口,檢查像素的錯誤:

$(window).resize(function() { 
    $('li').each(function() { 
     var back = $(this).find('.back'); 
     var width = $(this)[0].getBoundingClientRect().width; 
     back.width(width);  
    }); 
}); 

如果使用.innerWidth(),而不是getBoundingClientRect ()你會看到你所說的錯誤。

+0

太棒了。完美的解決方案。非常感謝你!我應該向jQuery報告這個「問題」還是jQuery的開發者意識到這一點?因爲對我來說它看起來像一個錯誤。 – TiMESPLiNTER