我有一个父元素,包含两个子元素,使用flexbox显示在彼此之上.此父元素的max-height属性设置为特定值.因此,只要内容很短,父元素应该保持较小,随着内容的增长,父元素随之增长,直到满足其最大高度.此时我们应该在内容元素上看到滚动条.
#container {
display: flex;
max-width: 80vw;
max-height: 100px;
flex-direction: column;
}
#content {
overflow-y: auto;
}
/* styling - ignore */
#container {
border: 2px solid black;
margin-bottom: 1em;
}
#header {
background-color: rgb(245, 245, 245);
padding: 10px;
}
#content {
background-color: rgb(255, 255, 255);
padding: 0 10px;
}Run Code Online (Sandbox Code Playgroud)
<div id="container">
<div id="header">Header</div>
<div id="content">
<p>Everything works as supposed to, move along</p>
</div>
</div>
<div id="container">
<div id="header">Header</div>
<div id="content">
<p>Very long content</p>
<p>Very long content</p>
<p>Very long content</p> …Run Code Online (Sandbox Code Playgroud)在我的网站上有以下代码:
<meta name="viewport" content="width=990"/>
Run Code Online (Sandbox Code Playgroud)
这使得我的网页在移动设备上显示得很好(我不能使用宽度=设备宽度,因为流动的元素有100%的宽度 - 这会严重搞砸页面).但是,有副作用.在某些浏览器上,如IE Mobile 10,它使SOME字体更大.有趣的是,我网站上的元素到处都使用了相同的CSS,其中只有一部分被这个感染了.我不知道为什么会这样.
有什么办法可以阻止浏览器放大字体并使其与桌面上的像素保持一致吗?更改元标记?把东西放在CSS中以阻止它?
我现在正在寻找解决方案很长一段时间没有效果.我非常感谢你对此事的任何帮助.
提前致谢!