如何使Chrome，Firefox和Opera無縫地縮放容器中的文本？

我想在網站上製作一個表單，用戶應該編輯它然後打印。家長<div>容器應該模仿紙張大小A4，以便大家可以看到他打算打印什麼。 <div>維數是固定的。經典所見即所得。如何使Chrome，Firefox和Opera無縫地縮放容器中的文本？

問題出現了，當我在Opera，Firefox和Chrome中放大和縮小頁面時。看起來，容器的寬度和內部的文本正確調整大小，但底部顯示了變化，這大大影響和破壞了我的意圖。

由縮放110％文本底線跳出容器，其他值隨機更改頁腳厚度。沒有預測，容器和文本將如何表現（AFAIK）。

我花了幾個小時在網上找到解決方案。我更改了字體高度和容器的度量單位（px，em，vm）。沒什麼幫助。看起來，文本的行高總是整數，所以當文本被調整大小時，行高的總和可以具有離散和不同的值，這並不真正反映父容器的調整後的高度。

這嚴重影響設計並導致「錯誤」的用戶體驗。

鉻變焦100％

鉻變焦110％

鉻變焦125％

在這裏，我提供測試代碼。嘗試放大和縮小（在Chrome 48.0.2564.116 m，Opera 35.0.2066.68 - Windows 7; Firefox 44.0.2 - Windows XP中測試）。

AND !!!!令我大吃一驚的是，IE 11.0.9600.17728放大了這個令人驚訝的正確性!!!!!非常好。 我真的很困惑。

感謝意見

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Example</title> 
</head> 
<body> 
<div contentEditable="true" style = "position:absolute; left:10px; top:10px; width:280px; height:350px; border: 2px; background-color:#FAF; font-size: 16px"> 
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempor est non venenatis rutrum. Aliquam eros lorem, rutrum id porta eget, scelerisque ut augue. Vestibulum nulla tortor, ultrices ut molestie sed, sollicitudin at justo. Praesent consectetur augue justo, ut sollicitudin leo porttitor at. Duis dignissim metus sed posuere convallis. Proin sagittis lobortis metus, ut lobortis sem viverra lobortis. Donec eget tempus magna. 
</span><p> 
<b>Curabitur vehicula, risus at finibus venenatis, neque justo viverra purus, vitae suscipit lacus arcu in magna. In tempus justo mattis arcu laoreet finibus. Nam imperdiet leo pharetra, feugiat nisl sed, feugiat felis. Pellentesque interdum egestas lobortis. </b> 
</p> 
</div> 
</body> 
</html>

來源

2016-03-06 lyborko

所以當我發現，使縮放流暢運行無干擾的唯一正確途徑是申請-webkit-變換：規模（）;爲期望的元素和禁止瀏覽器應用本地縮放功能（未測試，只是一個提案）。這至少在Opera，Chrome中起作用。

這裏是例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Example</title> 
</head> 
<script type="text/javascript"> 
    var a=1; 

    function Adjust(){ 
    el = document.getElementById("targ"); 
    a = a + 0.01; 
    el.style.webkitTransform = 'scale(' + a + ')'; 

} 

</script> 
<body> 
<button onclick="Adjust()">Adjust</button> 
<div id="targ" contentEditable="true" style = "position:absolute; left:100px; top:100px; width:280px; height:350px; border: 2px; background-color:#FAF; font-size: 16px; -webkit-transform: scale(1); "> <!-- -webkit-transform:translate(100px,100px); --> 
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempor est non venenatis rutrum. Aliquam eros lorem, rutrum id porta eget, scelerisque ut augue. Vestibulum nulla tortor, ultrices ut molestie sed, sollicitudin at justo. Praesent consectetur augue justo, ut sollicitudin leo porttitor at. Duis dignissim metus sed posuere convallis. Proin sagittis lobortis metus, ut lobortis sem viverra lobortis. Donec eget tempus magna. 
</span><p> 
<b>Curabitur vehicula, risus at finibus venenatis, neque justo viverra purus, vitae suscipit lacus arcu in magna. In tempus justo mattis arcu laoreet finibus. Nam imperdiet leo pharetra, feugiat nisl sed, feugiat felis. Pellentesque interdum egestas lobortis. </b> 
</p> 
</div> 

</body> 
</html>

來源

2016-03-06 20:18:56 lyborko

如何使Chrome，Firefox和Opera無縫地縮放容器中的文本？

回答

相關問題