Question

我最近开始学习Flexbox，网格布局以及探索其他新功能。响应式和/或移动式首次设计对我来说也有点新鲜，所以我想尝试构建一些真实的东西。所以，我开始建立一个小型的个人网站来试试这一切。我的意图是使用display: flex;进行主导航，然后在我的内容区域使用display: grid;对各种内容进行排序。＆＃34;

我主要使用Chrome的设备模拟器进行测试。

我把所有标记放在第一个测试页面上。然后，我开始从页面顶部开始应用样式。在我开始设计导航之前，我没有做多远，我的第一步是将display: flex;应用于包含导航链接的<ul>。

添加display: flex;后，每个<li>内的文字变得很小 - 这么小，我无法在桌面上阅读。我希望文本保持与应用display: flex;之前的大小相同（如果需要，还可以使用其他样式更改文本）。

如果删除了display: flex;，则原始文字大小会正确恢复，但我的导航不再是水平的。同样，我知道还有其他方法可以实现我正在进行的水平导航。我特意选择Flexbox作为自己的教育体验。

我一直在尝试寻找解决方案几天。以下是我所学到的：

文件在......

时是正确的

可在最新版本的Firefox和Edge中查看。
在Chrome窗口中查看已手动调整大小（而不是使用设备模拟器）。

导航时很小......

使用设备模拟器在最新版本的Chrome中查看。
在真正的Android设备上查看最新版本的Chrome。我在三星Galaxy S5上测试过。

在测试解决方案时，我决定将normalize.css应用于文档以查看默认浏览器样式是否可能是原因。不幸的是，它无法解决问题，但是它会创建一个不同的情况（同样，仅在Chrome中），这可能被认为是朝着正确方向迈出的一步。

当应用normalize.css时，页面上的所有内容都变得很小。它太小了，无法阅读，但它的大小一致 - 这就是我想要的......这个尺寸在Chrome中太小了。

我决定注释掉normalize.css的部分内容以确定导致更改的原因。我很幸运：它是最早的声明之一：html {-webkit-text-size-adjust: 100%;}。这一条规则将页面上每个元素的大小缩小，但仅限于Chrome（我假设是Safari，但我无法轻易测试）。

然后它变得陌生：删除部分HTML会导致同样的问题。

Chrome中的所有内容都很小......

-webkit-text-size-adjust: 100%;适用于html或body。
删除了一些HTML元素。它似乎不是某个元素。删除<h1>，<h2>，<ul>，<li>和<p>后，我遇到了问题。

一个不太理想的解决方案是利用-webkit-text-size-adjust属性并仅在导航中增加文本的大小。例如，#banner li {-webkit-text-size-adjust: 300%;}。

这种方法有两个缺点，如果我多学一点，两者都可以解决。首先，我不知道准确调整文本大小所需的百分比。我使用300%作为猜测，它看起来是正确的。其次，我真的不明白-webkit-text-size-adjust属性的作用，所以我不知道使用它的其他问题可能会导致什么。

以下是我学到的其他一些内容......

我检查了HTML和CSS是否有错误。两者都验证。
更改字体大小或单位没有任何区别。
更改<li>弹性项目的高度不会调整文本的大小;它只会改变盒子的高度。
Flexbox对齐仍然可以正常工作。
我能够使用新文档重新创建同样的问题。

我创建了一个专门用于调试此问题的文档。代码如下。我的真实页面几乎完全相同，只是底部有更多<section>标签和内容。 删除除<section>标记之外的<header>标记内的任何内容都会导致所有内容变得很小。我已删除了几乎所有可能的元素。为简单起见，CSS显示在文档顶部的<style>标记中。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flexbox Error Example</title>

<style type="text/css">
    body { font: 100%/1.5 Arial, sans-serif; }

    #banner ul {
        display: flex;
        justify-content: space-between;
        list-style: none;
        /*-webkit-text-size-adjust: 300%; */
    }
</style>
</head>
<body>
<header id="banner">
    <span>Logo Placeholder</span>
    <nav>
        <ul>
            <li><a href="Test1.html">Link 1</a></li>
            <li><a href="Test2.html">Link 2</a></li>
            <li><a href="Test3.html">Link 3</a></li>
            <li><a href="Test4.html">Link 4</a></li>
        </ul>
    </nav>
</header>
<div>
    <section>
        <header>
            <h1>Heading 1</h1>
        </header>
        <ul>
            <li><a href="List1.html">List 1</a></li>
            <li><a href="List2.html">List 2</a></li>
            <li><a href="List3.html">List 3</a></li>
        </ul>
    </section>
    <section>
        <header>
            <h2>Heading 2</h2>
        </header>
        <ul>
            <li>List 4</li>
            <li>List 5</li>
            <li>List 6</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor varius erat. Nulla rutrum nisl sit amet massa volutpat lacinia. Ut venenatis cursus mi vel lacinia.</p>
    </section>
</div>
</body>
</html>

最后，这是一张显示页面的3种不同状态的图片：device emulator screenshots

我对此感到茫然。我已经尝试过我所知道的所有事情，花大量时间研究，并问一些开发人员朋友，他们也无法告诉我发生了什么。

是什么导致Flexbox缩小Chrome中的文字？

0 个答案: