html - 文本流和 css3 缩放属性

Question

我有一个包含文本的 div。在编辑模式下，这个 div 使用 css 缩小到大约 0.9 以适应我的管理界面。然而，在演示模式下，它并没有被缩小，而且 - 借来看看 - 文本的流动完全不同。换行符在完全不同的地方。

有没有办法解决这个问题，还是我只需要在编辑过程中放弃缩小？

查看这些图片的右下角...首先是编辑模式下的缩放版本，然后是演示模式的全尺寸、未缩放、未缩放版本。

Answer 1

我不知道我是否 100% 复制了您的问题；但是我准备了一个类似的布局，在 Chrome 中发现了和你一样的问题。

但是将缩放更改为

-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);

解决了 Chrome 中的问题。

在 IE10 中，问题没有出现。

不过没试过其他浏览器。

如果需要支持 IE 8，我会尝试：

#transformedObject {

/* IE8+ - must be on one line, unfortunately */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9, M12=0, M21=0, M22=0.9, SizingMethod='auto expand')";

这取自useragentman web，我没试过

我看到我之前的评论解释得不好：在我在 IE10 中的测试中，缩放和转换都运行良好。我不知道我是否准确地重现了这个问题，所以我不知道我是否解决了它；但我至少看起来进行更改是安全的。

在测试中看到它：

小提琴

当您选中复选框时，div 的宽度会增加，只是为了查看对布局的不同调整。div 是：原始、转换（绿色）缩放（红色）以及转换和缩放叠加以查看差异。至少在 IE 10 中，转换和缩放都等同于原始版本。

Answer 2

在网页中，您没有适当的文本流控制。这主要是因为不同平台上的不同浏览器对字体字形的呈现方式不同。您的文本的跟踪也会有所不同。因此，如果您优化您的文本以在您自己的浏览器上看起来很棒，它可能会吸引不同的浏览器。所以告别网络浏览器中的像素精确文本表示。这是一个渺茫的希望。

PS：
请勿text-align: justify在网页上使用。真的很烂。