Question

嘿伙计们刚刚得到了一些文字，我想知道为什么在某些分辨率下我缩小并放大浏览器时不会停留在同一个地方。它主要发生在Firefox中。

        <div class = "hello">
            <p>Hello This is just an example of what should go in here. When   youi move down to the bottom you will see what you need 2 enter. .</p>
        </div>

以下是我用来控制它的css。

.hello
{
position:absolute;
top: 210px;
width:37em;
text-wrap:none;
text-align: left;
font-size: 16px;
}

Answer 1

放大或缩小（Ctrl +或Ctrl - ）时，页面上的所有内容都会改变其大小。因此，不仅font-size变得更大，而且top距离变得更大。

当用户在浏览器首选项中更改默认字体大小时，可以实现所需的行为。

使用Ctrl +和Ctrl获取此行为的唯一方法是使用JavaScript捕获浏览器的缩放并正确修改top距离。但是，我认为这不是一个好主意，因为Ctrl +和Ctrl - 对于有一些视觉问题的人特别有用，并且它们是所有浏览器中的标准行为。

Answer 2

问题在于你绝对的顶级定位。如果你使用这个CSS：

    <style>
        .hello {position: absolute; width: auto;}
        .hello p {word-wrap:none; font-size:16px;}
    </style>

您会注意到DIV只是在行间距和字体大小增加的情况下保持在同一个位置。如果您希望DIV保持在完全相同的位置，则需要使用position: fixed;

同样text-wrap:none;不是您应该使用的有效CSS参数word-wrap:none;。

文字不在同一个位置

2 个答案: