我得到一個非常有趣的毛刺都在Safari和Firefox與以下的jsfiddle:1像素,在某個窗口偏置寬度
你必須點擊紅色框切換藍色覆蓋。
我有兩個左浮動相對位置li
元素寬度爲32%
加1%
右邊距。然後,我在li
元素上放置一個div
元素,位置absolute
,頂部/左邊爲0。這個div
的寬度將被設置爲與32%li
(通過jQuery)相同的寬度。
在某些屏幕寬度上,我得到1px的毛刺(太長或太短)。這樣的屏幕截圖顯示了它:
我怎樣才能防止這種故障?
我得到一個非常有趣的毛刺都在Safari和Firefox與以下的jsfiddle:1像素,在某個窗口偏置寬度
你必須點擊紅色框切換藍色覆蓋。
我有兩個左浮動相對位置li
元素寬度爲32%
加1%
右邊距。然後,我在li
元素上放置一個div
元素,位置absolute
,頂部/左邊爲0。這個div
的寬度將被設置爲與32%li
(通過jQuery)相同的寬度。
在某些屏幕寬度上,我得到1px的毛刺(太長或太短)。這樣的屏幕截圖顯示了它:
我怎樣才能防止這種故障?
好了,作爲一個正式的答案:
的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 ()你會看到你所說的錯誤。
太棒了。完美的解決方案。非常感謝你!我應該向jQuery報告這個「問題」還是jQuery的開發者意識到這一點?因爲對我來說它看起來像一個錯誤。 – TiMESPLiNTER
您發佈的小提琴看起來與您在問題中發佈的圖像完全無關。 – Pointy
@Pointy:對我來說,它在1920 x 1200像素的firefox – Tyr
@Tyr上,所以你點擊那個jsfiddle鏈接,你會在紅色的盒子上看到一個藍色的盒子? – Pointy