我正在製作一個豐富的網絡客戶端,您可以爲演示文稿創建幻燈片。其中一項功能是可以縮放頁面以適應屏幕。我使用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中的一個突出錯誤。