html - 缩放级别设置为 25% 时文本用完

Question

当我将我的网站放大到 25% 时，文本奇怪地用完了。我怎样才能解决这个问题？请查看以下链接，您可以在其中看到模型的结果。谢谢。

http://jsfiddle.net/schenker76/YqX9r/embedded/result/

Answer 1

首先，这个问题只发生在 Chrome 中，因此可能主要是由于舍入错误造成的（Chrome 倾向于截断元素位置的小数）。Firefox 仅显示文本换行方面几乎微不足道的变化，而 IE 使文本与文档的其余部分完全一致。

最简单的解决方案可能是停止对所有内容进行绝对定位，如果这适用于您的设计。如果允许文本遵循正常流程，那么它在每个浏览器中看起来都不错，尽管 Chrome 仍然会像在 Firefox 中看到的那样做一些小的跳跃（相对而言，“wel_txt”元素可能会变得非常大，因为到文本收缩得不够快）。

要通过较少的设计调整来解决问题，您可以使用top而不是定位“wel_hdr”元素bottom，并且......也许给“wel_txt”overflow: auto以便它获得滚动条而不是完全隐藏文本。

Answer 2

将宽度设置为#wel_txt以 % 为单位而不是以像素为单位，将解决此问题。

#wel_txt {
    position: absolute;
    width: 70%;
    height: 92px;
    top: 50px;
    margin-left: 100px;
    text-align: left;
    overflow: hidden;
}

希望这可以帮助。