Html 是什么导致Flexbox在Chrome中收缩文本？_Html_Css_Flexbox

Html 是什么导致Flexbox在Chrome中收缩文本？

html css

Html 是什么导致Flexbox在Chrome中收缩文本？,html,css,flexbox,Html,Css,Flexbox,我最近开始学习Flexbox、网格布局，并探索其他新功能。响应和/或移动优先设计对我来说也有些新鲜，所以我想尝试构建一些真实的东西。所以，我开始建立一个小型个人网站来尝试这一切。我的意图是使用display:flex用于我的主导航，然后使用显示：网格在我的内容区域中对各种内容“卡片”进行排序我主要使用Chrome的设备模拟器进行测试我把我的第一个测试页面的所有标记放在一起。然后，我开始从页面顶部开始应用样式。我在开始设计导航之前没走多远，我的第一步是应用display:flex到包含我的导航

我最近开始学习Flexbox、网格布局，并探索其他新功能。响应和/或移动优先设计对我来说也有些新鲜，所以我想尝试构建一些真实的东西。所以，我开始建立一个小型个人网站来尝试这一切。我的意图是使用

display:flex用于我的主导航，然后使用显示：网格在我的内容区域中对各种内容“卡片”进行排序
我主要使用Chrome的设备模拟器进行测试
我把我的第一个测试页面的所有标记放在一起。然后，我开始从页面顶部开始应用样式。我在开始设计导航之前没走多远，我的第一步是应用display:flex
到包含我的导航链接的

只要显示：flex，每个
中的文本变得很小，以至于我无法在桌面上阅读。我希望文本保持原来的大小display:flex已应用（如有必要，可以使用其他样式对其进行更改）
如果display:flex被删除，但我的导航不再是水平的。同样，我知道还有其他方法可以实现我正在研究的水平导航。我特别选择Flexbox作为自己的教育体验
我已经试验了几天，试图找到解决办法。以下是我学到的：
当…时，文档是正确的。
它可以在最新版本的Firefox和Edge中查看
它在手动调整大小的Chrome窗口中查看（而不是使用设备仿真器）
当…时导航很小。
它在最新版本的Chrome中使用设备模拟器进行查看
它是在真正的安卓设备上用最新版本的Chrome浏览器浏览的。我在三星Galaxy S5上进行了测试
在测试解决方案时，我决定对文档应用默认浏览器样式，看看是否是原因。不幸的是，它没有解决问题，但它创建了一种不同的情况（同样，仅在Chrome中），这可能被认为是朝着正确方向迈出的一步
应用normalize.css时，页面上的所有内容都会变得很小。它太小了，看不懂，但尺寸都是一致的——这就是我想要的……这个尺寸在Chrome中太小了。
我决定注释normalize.css的部分内容，以确定是什么导致了更改。我很幸运：这是最早的声明之一：html{-webkit文本大小调整：100%；}
。这一规则将页面上每个元素的大小减小到很小，但仅限于Chrome（我假设是Safari，但我无法轻松测试）
然后它变得更奇怪：删除HTML的某些部分也会导致同样的问题
当……
-webkit文本大小调整：100%应用于html
或body

一些HTML元素被删除。它似乎不是某个元素。在删除
、
、
、
和
后，我遇到了问题
一个不太理想的解决方案是利用-webkit text size adjust
属性，仅在导航中增加文本大小。例如，#banner li{-webkit文本大小调整：300%；}
这种方法有两个缺点，如果我多学一点，这两个缺点都可以解决。首先，我不知道准确调整文本大小所需的百分比。我用300%
作为一个猜测，它看起来差不多是对的。其次，我不太了解-webkit text size adjust
属性的作用，因此我不知道使用它可能会导致哪些其他问题
以下是我学到的其他一些东西……
我检查了HTML和CSS的错误。两者都有效
更改字体大小或单位没有任何区别
更改伸缩项的高度不会调整文本的大小；它只会更改长方体的高度
Flexbox对齐仍能正常工作
我能够使用一个新文档重新创建相同的问题
我创建了一个文档专门调试这个问题。代码如下。我的真实页面几乎相同，只是底部有更多的标签和内容删除
标记中除
标记以外的任何内容都会导致所有内容变小。我几乎删除了所有可能的元素。为了简单起见，CSS显示在文档顶部的
标记中
<!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>


Flexbox错误示例
正文{font:100%/1.5 Arial，无衬线；}
#横幅ul{
显示器：flex；
证明内容：之间的空间；
列表样式：无；
/*-webkit文本大小调整：300%*/
}
标志占位符






标题1





标题2

清单4
清单5
清单6

Lorem ipsum dolor sit amet，是一位杰出的献身者。暂时性静脉曲张。不含芦丁，不含酒精。这是拉齐尼亚河畔的威尼斯人

最后，这是一个显示页面3种不同状态的图像：
我不知所措