Question

基本上，当我放大文字时，它会弄乱我的格式。看起来文本变焦放大的速率与黄框变焦的速率不同。

谁能告诉我为什么会这样？

以下是示例代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
            <meta http-equiv="Expires" content="-1"/>
                <style>
                .highlightLine
                {
                    filter: alpha(opacity=50);
                    opacity: 0.5;
                    background-color: #e8e800;
                    position: absolute;
                    z-index: 1;
                    -moz-user-select: none;
                }

                .clickAbleTable
                {
                    border-width: 0px;
                    border-collapse: collapse;
                    position: relative;
                }

                .zeroAll
                {
                    padding: 0px;
                    margin: 0px;
                    border: 0px;
                }
            </style>

    </head>
    <body class="zeroAll">
        <DIV style="POSITION: absolute; FONT-SIZE: 100%" id=container name="container" class="zeroAll">
            <TABLE style="WIDTH: 100%" class="clickAbleTable zeroAll">
                <TBODY class="zeroAll">
                    <TR class="zeroAll">
                        <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. This is sample text. </PRE></TD></TR>
                    <TR class="zeroAll">
                        <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. This is sample text. </PRE></TD></TR>
                    <TR class="zeroAll">
                        <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. This is sample text. </PRE></TD></TR>
                    <TR class="zeroAll">
                        <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. This is sample text. </PRE></TD></TR>
                    <TR class="zeroAll">
                        <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. </PRE></TD></TR>
                    <TR class="zeroAll">
                        <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. </PRE></TD></TR>
                    <TR class="zeroAll">
                        <TD class="zeroAll"><PRE class="zeroAll">This is sample text. </PRE></TD></TR>
                    <TR class="zeroAll">
                        <TD class="zeroAll"><PRE class="zeroAll">This is sample text. </PRE></TD></TR>
                    <TR class="zeroAll">
                        <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. This is sample text. </PRE></TD></TR>
                    <TR class="zeroAll">
                        <TD class="zeroAll"><PRE class="zeroAll">This is sample text. This is sample text. This is sample text. </PRE></TD></TR>
                    </TBODY>
            </TABLE>

            <DIV style="WIDTH: 10px; DISPLAY: block; HEIGHT: 100%; TOP: 0px; LEFT: 140px" id=colMark_80_4 class=highlightLine>
            </DIV>
            <DIV style="WIDTH: 10px; DISPLAY: block; HEIGHT: 100%; TOP: 0px; LEFT: 5.55%" id=colMark_80_5 class=highlightLine>
            </DIV>
        </DIV>
    </body>
</html>

注意：黄线应留在单词样本的任一侧。

Answer 1

IE对文本和静态元素与定位元素和浮点数有不同的算法。 adaptive zoom算法适用于文本和静态元素：

尺寸缩放是IE8自适应缩放中最重要的改进之一。使用绝对单位（例如：in，cm，mm等）或设备和字体相关单位（例如：px，ex，em等）指定的尺寸将根据缩放级别进行缩放。因此，在200％时，100px变为200px，20pt变为40pt。依赖于内容的维度，即百分比和自动，在布局期间计算时不会缩放。因此，在200％时，视口的50％的宽度不会变为100％。这是IE7中放大的一个显着变化。

就像定位元素和浮点数一样：

定位元素像流入元素一样增长和缩小。但是，他们的新位置取决于属性集和使用的偏移量。类似地，浮动将根据CSS的常规规则相对于其容器定位。如果容器的宽度随缩放而变化，则浮动的位置将改变。缩放相邻浮点就像调整窗口大小一样 - 如果视口的宽度不足以容纳浮点数，则标记中的最后一个将下降到下一行。

在IE8兼容模式下，使用IE10中的以下元标记来修复缩放：

<meta http-equiv="X-UA-TextLayoutMetrics" content="natural" />

<强>参考

为什么ie8的缩放以不同的比例扩展div而不是扩展文本？

1 个答案: