Question

我正在尝试在网站上制作一个表格，该表格应由用户编辑然后打印。父<div>容器应该模仿A4纸张尺寸，这样每个人都可以看到他要打印的内容。 <div>维度是固定的。经典所见即所得。

当我在Opera，Firefox和Chrome中放大和缩小页面时出现问题。似乎容器的宽度和文本内部调整正确，但底部显示了变化，这极大地影响和破坏了我的意图。

通过缩放110％的文本底线跳出容器，其他值随机改变页脚厚度。没有预测，容器和内部文本将如何表现（AFAIK）。

我花了好几个小时在网上找到解决方案。我为font-height和容器更改了度量单位（px，em，vm）。什么都没有帮助。看起来，文本的行高始终是整数，因此在调整文本大小时，行高的总和可以具有离散和不同的值，这些值并不真正反映父容器的调整高度。

这严重影响了设计，使得错误的＆＃34;用户体验。

Chrome缩放100％

Chrome缩放110％

Chrome缩放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>

Answer 1

因此，正如我所发现的那样，在没有毛刺的情况下使缩放运行的唯一正确方法是应用-webkit-transform：scale（）;对于所需的元素和禁止浏览器应用本机缩放功能（未测试，只是一个提案）。这至少适用于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>

如何让容器中的Chrome，Firefox和Opera缩放文字完美无缺？

1 个答案: