2013-04-16 26 views
1

我正在製作一個豐富的網絡客戶端,您可以爲演示文稿創建幻燈片。其中一項功能是可以縮放頁面以適應屏幕。我使用CSS轉換來實現這一點,並在小型筆記本電腦屏幕上縮小。但是,在這些情況下,我的內容可編輯文本框會開始丟失閃爍的插入符號(它從0.7開始,並且越縮小越差)。爲什麼contentEditable的脫字符號在Firefox,IE中縮小時會消失?

看看這個簡單情況:

<!DOCTYPE html> 
<html><head> 
<style type="text/css"> 
div { 
    border: 1px solid gray; 
    -webkit-transform: scale(0.7); 
    -moz-transform: scale(0.7); 
    -ms-transform: scale(0.7); 
    -o-transform: scale(0.7); 
    transform: scale(0.7); 
} 
</style> 
</head><body> 
<div contenteditable="true">The quick brown fox jumps over the lazy dog</div> 
</body></html> 

還是在的jsfiddle:http://jsfiddle.net/5wJGg/3/

點擊最左邊的字符,然後使用鍵盤的右箭頭鍵要經過的所有字符 - 等待插入符號每次閃爍。

  • 谷歌瀏覽器:插入符號總是出現。
  • Firefox 20:插入符不會出現在某些字符之間。
  • IE 9:在一些字符之間不會出現插入符號。
  • IE 10:脫字符總是出現。
  • 的Safari(蘋果):插入符總是出現

我注意到,有時谷歌的Chrome/Safari瀏覽器將繪製在灰色2px的寬度插入符號。

這是Firefox和IE中的子像素渲染錯誤嗎?有沒有解決方法?我無法用CSS設計脫字符號,所以恐怕我可能是SOL。

[編輯] 剛剛在Windows 8的IE 10上測試過這個插件。插入符總是出現。當發生子像素問題時,插入符號會顯示爲較粗和灰色,所以它看起來像IE 9中的一個錯誤,並且是Firefox中的一個突出錯誤。

回答

相關問題