css - 在浏览器中放大或缩小时的网站布局 "breaks apart"+ 其他一些基本的 css 问题

Question

我对 CSS 几乎是个新手，我现在想做的只是为小型企业设计一个非常简单/基本的初始页面或登录页面。

这是站点的 URL:My site

现在，如果您继续使用任何浏览器，比如谷歌浏览器，然后缩小或放大 (ctrl -/+)，您会注意到网站布局开始“ split ”，因为我的所有 div 都开始四处移动。我显然不想要这个，只是希望网站在人们放大或缩小时保持不变，就像所有好的网站一样哈哈。

我知道这一定与定位有关，但我想不通这对生活或我来说是什么。昨晚我花了几个小时浏览类似的问题，但我能弄明白。

我不是为了占用更多空间而发布代码，我假设既然我给了你 URL，你就可以从那里检索代码。

我还有一些更小的问题:

1) 如果你在 chrome 上打开我的网站，或者你会注意到在页面底部的“条款和条件”之后，网站就结束了，就像它应该的那样。但是，如果您继续使用 Firefox，您会注意到在“条款和条件”之后，背景可以说会持续一段时间。为什么会这样，我该如何解决？

2) 您会注意到在不同的浏览器上元素的定位略有不同。最明显的是，如果您查看 chrome/firefox，然后查看 Internet Explorer 9，您会注意到“条款和条件”比 chrome 或 ff 略高，因此略微触及主要内容区域。有办法解决这个问题吗？

3) 什么是使 div 居中的有效方法？例如，我想在主要内容区域中将“注册”按钮完全居中。我几乎一直在关注它并使用相对定位来居中。什么是更准确的居中方式？

谢谢，如果这些问题看起来有点多余，我们深表歉意。如果您需要任何澄清，我会像鹰一样监视这个问题。

干杯

Answer 1

1. 放大或缩小时，您会遇到舍入和文本渲染方面的问题。确保布局能够经受一点拉伸(stretch)而不会崩溃是个好主意。

2. 相对定位受到#1 中提到的问题的影响，因此不可靠。

3. 研究使用某些方法来删除各种浏览器将应用的属性。你可以使用 reset给你一些更可行的东西或尝试normalize使它们在浏览器之间更加均衡的值。

4. 对于(水平)居中，您有一些选择:

   • 如果您有一个带有“text-align:center”的容器，它会将所有内联 block 或内联子元素居中。
   • 如果您想将 block 元素居中，可以使用“margin: 0 auto”使其水平居中并移除垂直边距。
   • 如果你想让一个绝对定位的元素居中，你可以使用“left: 50%, margin-left: -(width of element/2)”。

除了尝试摆脱相对定位之外，我还建议您不要显式设置 body 元素的高度。通常，您希望元素管理它们自己的大小，这样它们会更健壮。

如果您现在使用“position: relative”，因为这是您知道的用法，我建议您尝试使用“float: left”(或right)，或更改显示类型(display: inline-block) .这可能会帮助您朝着正确的方向开始。