gpt4 book ai didi

html - 放大时分页 - HTML/CSS/浏览器问题

转载 作者:太空宇宙 更新时间:2023-11-04 04:58:06 26 4
gpt4 key购买 nike

我有一个使用两列页面布局的简单页面,该页面布局在缩放时中断。在这里 - 尝试使用 cmd+ 放大:

http://jamesabbottdd.com/ems-with-max-width.html

标题在右侧中断,导致出现水平滚动条。最初我认为这是由于使用像素来调整元素大小和设置最大宽度。这篇文章就是关于这个问题的:

http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

然后我用 em 覆盖像素,但问题仍然存在。

这让我着迷不已。我已经使用 CSS 大约十年了,最近 3 年处于较高水平,但还没有弄清楚为什么上面的页面会中断,但这个:

http://framelessgrid.com/

不管我放大得多近,都不会。

非常感谢任何帮助。

最佳答案

嗯,您似乎无意中将两个稍微不相关的观察结果联系在一起,这使得诊断实际问题变得更加困难。

区分症状

根据您的屏幕截图,您的页眉确实出现了一些视觉故障。此外,还会出现一个水平滚动条 - 但请放心,这不是由于标题的任何属性造成的。事实上,这是由于标题下方的包装 div,其宽度为 1130px。所以当你放大那么多时,它不能全部显示在屏幕上,从而创建了滚动条。


真正的问题

回到标题的问题,颜色消失的原因是因为标题 div 的宽度为 100%。如果在截取该屏幕截图时一直向左滚动,则标题的背景颜色不会有任何问题,因为它会覆盖 100% 的浏览器宽度。 (如果你想知道这个 100% 的宽度是从哪里来的,那是因为标题中的 h1 元素;h1 通常有一个默认的 100% 宽度,即使使用一个元素你也看不到这种样式inspector like Firebug open.)

请注意,由于以下原因,您提供的网站未显示此问题:首先,它的标题没有背景颜色,因此您不会看到任何类型的问题(如果它确实有但是,您会立即看到 div 实际上并没有像您的那样跨越整个屏幕;它只比其中的文本宽一点,并且具有固定宽度。标题居中不仅仅是通过使用h1 元素的宽度为 100% 和 text-align:center,但也是由于 margin:0 auto 应用于标题 div。但是现在,如何解决您的问题问题?


解决方案

对于当前页面结构,最简单的解决方案是为标题 div 指定宽度。嗯,不是宽度本身,而是 min-width,它与包装器 div 的宽度相同。如果您将样式设置为 min-width:1130px,您应该会发现问题已解决。

希望对您有所帮助! (抱歉,如果阅读时间有点长。)

关于html - 放大时分页 - HTML/CSS/浏览器问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12018583/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com