Question

我一直在敲桌子试图弄清楚为什么会这样。我已经设置了一个在顶部，底部和左侧都有填充的锚点。在该锚点内部是两个文本元素，并且锚点的背景是图像。

现在，当我缩小（不缩小视口）chrome时，一切似乎都按预期缩小，直到达到80％。此时内容继续缩小，但左侧没有填充！在FireFox中，它似乎按预期工作。

附上我的代码，请关于如何解释这一点的任何想法将不胜感激。

＆＃13;

html {font-family: 'tex gyre heros', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; font-size: 10px}

a,a:link,a:visited,a:hover {text-decoration: none; color: inherit;}

.logo {
    padding: 10em 10em 0 0;
    background: url(../images/some-image.svg) left center no-repeat;
    display: inline-block;
    vertical-align: bottom;
}
.logo.main {
    padding: 1.2em 0 2.1em 12em;
}
.logo.main .logotype, .logotype.block {
    display: block;
}
.logotype {
    font-weight: bold;
    white-space: nowrap;
}
.logotype.title {
    font-size: 4em;
    line-height: 1.1;
    color: #646469;
}
.logotype.subtitle {
    padding: 0 0 0 0.078em;
    font-size: 2.1em;
    line-height: 1.1;
    color: #000000;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Company">
        <base href="">
        <title>Company</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/>
        <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
        <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" charset="utf-8"/>
    </head>
    <body>
        <header>
            <a class="logo main" href="">
                <span class="logotype title">Line 1</span>
                <span class="logotype subtitle">Line 2</span>
            </a>
        </header>
        <section>
        </section>
        <footer></footer>
    </body>
</html>

＆＃13;

Answer 1

这里的问题来自浏览器之间像素表示的差异。含义 - Chrome和Firefox可能会以不同的方式处理某些固定的像素值（不要问我为什么，它只是世界如何运作）。

可能的解决方案1：尝试在％中设置填充值，以便它们可以相互相对。

可能的解决方案2： CSS Tricks about not breaking the layout when zooming 上的此帖子：

可能的解决方案3 ：检查您的视口标记。的 Use this thread.

就像@DarkxPunk所说的那样，链接在Firefox的最左侧，并且在某种程度上不会在Chrome的最左边。

问题可视化以便进一步调查：

<强>铬：

<强>火狐：

在Chrome / Safari中缩小到80％以下时，填充不会缩小

1 个答案: