CSS 布局在放大/缩小时中断

标签 css

我是一名自学成才的网页设计师,拥有 3 个左右的网站。我刚刚为一位 friend 的客户完成了网站的第一页,因此比“真正的”客户更有耐心。

我喜欢这些网站的外观,它在流行浏览器的范围内相当一致,总的来说,我为此感到非常自豪,直到我意识到一个主要问题,老实说,离让我放弃我的浏览器大约两步之遥梦想成为一名网页设计师。

当使用 Chrome、Safari 或旧版 Explorer 时,如果有人将缩放比例设置为 100% 以外的任何值,网站的布局就会分崩离析。

这让我沮丧到近乎抑郁的地步。我用一个 div 包围整个主体,页面布局(在本例中是一个 MENU)几乎完全使用绝对定位的 UL(无序列表)完成。

该站点的组成方式是所有部分都相互连接(几乎像一个拼图),如果某些部分不一致,那将是非常明显的。

我听说缩放会把数字四舍五入,并且可能会在这里和那里要求一些低 alpha 像素,但在我的情况下,一些 block 元素确实有 25-50 像素的错位。

http://www.stevemarcella.com

最佳答案

现在还不需要粉碎你的梦想 :> 总有希望。

您应该做的第一件事是检查所有错误,根据验证程序,这些错误是主页上的 536 错误。 我建议您运行验证器并逐一更正错误。它可以解决你的问题。我注意到的第一个错误是您在 body 之外有一个 div 元素。您应该将所有内容都放在 body 标签内。

这是在体外。

<div class="wrapAroundBody" id="IdWrappingWholeBody">

希望对您有所帮助。

关于CSS 布局在放大/缩小时中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13223351/

相关文章:

css 选择器选择某个 div 内的所有元素

容器中的 JQuery 选择选择框溢出 : hidden

html - 框大小边框框不起作用,高度仍包括填充

javascript - 使用 DOM 操作一次将鼠标悬停在一个元素上

javascript - jQuery animate() 函数没有动画

html - 代码在 Bootstrap 中使用 col 弄乱了第二行

css - 我无法将背景图像设置为特定的 div 或 body

html - 使子溢出 div 正确调整其父级的大小

php - 如何更改 Moodle 中的注册页面设计

javascript - 单击一个页面时如何更改页面上的所有照片