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

发布于 2024-12-25 23:41:16 字数 3966 浏览 3 评论 0原文

基本上，当我放大文本时，它会弄乱我的格式。文本缩放比例似乎与黄色框缩放比例不同。

谁能告诉我为什么会发生这种情况？

下面是示例代码：


<!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>

注意：黄线应位于“sample”一词的两侧。

原文

Basically, when I zoom in on text it messes up my formatting. It seems like the text zoom zoom at a different rate than the yellow box zoom.

Can anyone tell me why this is happening?

Below is the sample code:


<!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>

Note: The yellow lines should stay on either side of the word sample.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哭了丶谁疼 2025-01-01 23:41:16

IE 对于文本和静态元素与定位元素和浮动元素有不同的算法。自适应缩放算法对于文本和静态元素是这样工作的：

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

对于定位元素和浮动来说：

定位元素像流内元素一样增长和收缩。然而，它们的新位置是由设置的属性和使用的偏移量确定的。同样，浮动将根据 CSS 的正常规则相对于其容器进行定位。如果容器的宽度随着缩放而改变，那么浮动的位置也会改变。相邻浮动的缩放与调整窗口大小完全相同 - 如果视口的宽度不足以容纳浮动，则标记中的最后一个将下降到下一行。

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

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

参考

IE has different algorithms for text and static elements versus positioned elements and floats. The adaptive zoom algorithm works as such for text and static elements:

Dimension scaling is one of the most important improvements in IE8’s Adaptive Zoom. Dimensions specified using absolute units (e.g.: in, cm, mm, etc) or device and font dependent units (e.g.: px, ex, em, etc) are scaled as per the zoom level. Therefore, at 200%, 100px becomes 200px and 20pt becomes 40pt.
Content-dependent dimensions, i.e. percent and auto, are not scaled as they are computed during layout. Therefore, at 200%, a width of 50% of the viewport does not become 100% of the same. This is a marked change from Zoom in IE7.

And as such for positioned elements and floats:

Positioned elements grow and shrink like in-flow elements. However their new position is determined by the properties set, and the offsets used. Similarly, floats will be positioned with respect to their container as per the normal rules of CSS. If the width of the container changes with zoom, then the position of the float will change. Zooming of adjacent floats is exactly like resizing the window – if the width of the viewport is not large enough to accommodate the floats, the last one in markup will drop to the next line.

Use the following meta tag in IE10 to fix the scaling while in IE8 compatibility mode:

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

References

回复收藏 0 原文

~没有更多了~

关于作者

佼人

暂无简介

文章

27 人气

关注发私信

若能看破又如何

文章 0 评论 0

关注

夢野间

文章 0 评论 0

关注

doggiejohn

文章 0 评论 0

关注

就此别过

文章 0 评论 0

关注

初见终念

文章 0 评论 0

关注

qq_rvKjBH

文章 0 评论 0

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

若能看破又如何

夢野间

doggiejohn

就此别过

初见终念

qq_rvKjBH

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

若能看破又如何

夢野间

doggiejohn

就此别过

初见终念

qq_rvKjBH

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。