网站布局“分离”当在浏览器中放大或缩小+一些其他基本的css问题 [英] Website layout "breaks apart" when zooming in or out in browsers + a few other basic css questions

问题描述

我对CSS很新鲜，它现在只是为一个小型企业设计一个非常简单/基本的飞溅或着陆页。

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.

以下是网站的网址：我的网站

现在，如果你去任何浏览器，让我们说google chrome和你缩小或在（ctrl - / +），你会注意到，网站布局开始分裂，所有我的div只是开始转移。我显然不想这样，只是希望网站保持不变，当人们放大或缩小，非常像所有好网站haha。

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.

我知道它必须有与定位有关，但我不能把它看作我们的生活或我。昨天晚上我花了几个小时浏览类似的问题，但我可以弄清楚。

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.

我还有几个更小的问题：

I also have a few more, smaller questions:

1）如果您在Chrome上打开我的网站，或者您会注意到在页面底部的条款和条件后，网站结束，就像它应该。然而，如果你去firefox，你会注意到，在条款和条件后的背景说话会继续一段时间。为什么这是我如何解决它？

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?

2）你会注意到，在不同的浏览器元素的定位略有不同。
最明显的如果你看或chrome / firefox然后互联网浏览器9，你会注意到，条款和条件稍高于铬或ff，从而轻微触及主要内容区域。有没有办法解决这个问题？

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?

3）什么是高效，有效的方法来定位div？例如，我想将注册按钮居中在主要内容区域的中心。 ive几乎只是一直在看着它，并使用相对定位为中心。什么是更准确的方法来集中它？

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?

感谢，对不起，如果这些问题看起来有点多余。

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.

干杯

推荐答案

1. 放大或缩小时，由于四舍五入和文本呈现，您将遇到问题。

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.

相对定位受到＃1中提到的问题的影响，并且因此不可靠。

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

使用某些东西来移除各种浏览器将应用的属性。您可以使用重置为您提供更实用的功能，或尝试使用

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

对于（水平）中心，您可以使用necolas.github.com/normalize.css/\">正规化值，您有一些选项：

For (horizontal) centering you have some options:

• 如果您有一个包含text-align：center的容器，块或内联。


• 如果您要将块元素居中，则可以使用margin：0 auto将其居中，并删除垂直边距。


• 如果您要将绝对定位的元素置于中心，可以使用left：50％，margin-left： - （元素宽度 / 2）。

• 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)".

除了尝试摆脱相对定位，我建议您不要显式设置高度的身体元素。一般来说，你想要的元素管理自己的大小，这样他们会更加健壮。

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.

如果你现在使用position：relative，因为这是你知道如何使用，我建议你尝试使用float：left（或右），或更改显示类型（display：inline-block）。这可能会帮助您开始正确的方向。

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.

这篇关于网站布局“分离”当在浏览器中放大或缩小+一些其他基本的css问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！