在浏览器中放大或缩小时网站布局“分崩离析”+其他一些基本的 css 问题

Website layout "breaks apart" when zooming in or out in browsers + a few other basic css questions

提问by DeHustle

I'm pretty much as new to CSS as it gets and what I'm trying to do right now is just design a very simple/basic splash or landing page for a small business.

我对 CSS 非常陌生，我现在要做的只是为小型企业设计一个非常简单/基本的启动页面或登录页面。

Here is the url for the site: My site

这是该网站的网址： 我的网站

Now if you go on any browser, lets say google chrome and you zoom out or in (ctrl -/+) you will notice that the website layout starts to "break apart" in that all my divs just start shifting around. I obviously dont want this, and just want the site to remain the same when people zoom in or out, pretty much like all good sites haha.

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

I know it must have something to do with positioning, but I can't figure it our for the life or me. Last night I spent hours browsing similar questions but I can figure it out.

我知道这一定与定位有关，但我无法将其理解为我们的生活或我。昨晚我花了几个小时浏览类似的问题，但我能弄清楚。

I'm not posting the code as to take up more space, I'm assuming since I gave you the URL you'll be able to retrieve the code from there.

我不会发布代码以占用更多空间，我假设因为我给了您 URL，您将能够从那里检索代码。

I also have a few more, smaller questions:

我还有一些更小的问题：

1) if you open my site on chrome, or ie you'll notice that after the "terms and conditions" on the bottom of the page, the site ends, like it should. however, if you go on firefox, you'll notice that after the "terms and conditions" the background so to speak continues for a while. why is this and how can i fix it?

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

2) you'll notice that on different browsers positioning of elements is slightly different. most noticeably if you look or chrome/firefox and then internet explorer 9 you'll notice that the "terms and conditions" are slightly higher than in chrome or ff and thus slightly touching the main content area. is there a way to fix this?

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

3) what is an efficient, effective way to center divs? For example, I want to center the "sign up" button perfectly centered relative in the main content area. ive pretty much just been eyeing it out and using relative positioning to center it. what is a more accurate way to center it?

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

Thanks, and sorry if these questions seem a little redundant. if you need any clarification on anything I'll be monitoring this question like a hawk.

谢谢，如果这些问题看起来有点多余，我很抱歉。如果您需要对任何事情进行澄清，我将像鹰一样监视这个问题。

Cheers

干杯

回答by Henrik

1. When you zoom in or out, you will encounter issues because of rounding and text rendering. It is a good idea to make sure the layout can survive a bit of stretching without breaking down.

2. Relative positioning is affected by issues mentioned in #1, and therefore unreliable.

3. Look into using something to remove the properties that the various browsers will apply. You could use a resetto give you something more workable or try to normalizethe values to make them more even between browers.

4. For (horizontal) centering you have some options:

   • If you have a container with "text-align:center" it will center all child elements that are inline-blocks or inline.
   • If you want to center a block element, you can use "margin: 0 auto" to center it horizontally and remove vertical margins.
   • If you want to center an absolutely positioned element, you can use "left: 50%, margin-left: -(width of element/2)".

1. 当您放大或缩小时，您会因为舍入和文本渲染而遇到问题。确保布局可以承受一点拉伸而不崩溃是一个好主意。

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

3. 考虑使用一些东西来删除各种浏览器将应用的属性。您可以使用重置为您提供更可行的方法，或者尝试标准化这些值以使它们在浏览器之间更加均匀。

4. 对于（水平）居中，您有一些选择：

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

In addition to attempting to get rid of relative positioning, I would recommend that you do not explicitly set the height of the body element. Generally you want the elements to manage their own size, that way they will be more robust.

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

If you use "position: relative" now because that is what you know how to use, I would suggest you try using "float: left" (or right), or changing the display type (display: inline-block). That may help you get started in the right direction.

如果您现在使用“位置：相对”，因为这是您知道如何使用的，我建议您尝试使用“浮动：左”（或右），或更改显示类型（显示：内联块）。这可能会帮助您朝着正确的方向开始。

回答by Dio

not sure for your points 1 & 2, but as for 3 what i've come to use is the following have the divi want to center and then use width : some-percentage; margin-left : 100-(some_percentage)*0.5 ;, where some percentage is the width I want to use.

不确定您的第 1 点和第 2 点，但至于 3，我使用的是以下内容，div我想居中然后使用width : some-percentage; margin-left : 100-(some_percentage)*0.5 ;，其中一些百分比是我想要使用的宽度。

回答by lusketeer

a couple suggestions before go into fixing the zoom in and zoom out issue.

在解决放大和缩小问题之前，有一些建议。

1. Don't use <div>to wrap around text.
2. Use <h1>tags for header
3. Store your CSS in a separate css file.
4. You defined the header section that's great, but do that for container and footer as well.
5. Comments! That would make the job much easier for people who try to help you.

1. 不要<div>用于环绕文本。
2. 使用<h1>标签作为标题
3. 将您的 CSS 存储在单独的 css 文件中。
4. 您定义了很棒的页眉部分，但也要为容器和页脚执行此操作。
5. 注释！这将使那些试图帮助你的人的工作变得更容易。