调整每个浏览器的网站宽度

Question

我在一个网站上工作，在浏览器之间遇到了一些问题。一些浏览器显示网站完全居中，左边和右边都有黑色边框。其他浏览器显示它左对齐，左侧没有黑色边框，右侧有一个较大的边框。关于如何将HTML或CSS设置为在所有浏览器中正确对齐的建议？

更多信息：

它看起来像是集中在PC上，而不是Mac上。我的一个朋友有一台电脑，它可以作为电脑的中心，但在我的Mac电脑上却不是。地址为bellfortchurchofchrist.com

更新:添加了下面答案建议的一些代码，下面是PC上的代码：

​

​

这是我在Safari上的Mac上的：

​

​

Answer 1

这是对齐问题的一个回答，我不知道你说的边框是什么意思，对我来说，在OS上的Chrome中，网站是黑色背景，没有边框。

要修复对齐，您需要将整个网站放入一个包装器<div>标记中，并为该包装器提供以下样式：

width:1000px; margin:auto; position:relative;

标记应该紧跟在<body>之后开始，并在</body>之前结束。

这将给网站一个固定的宽度，使用margin和position:relative居中将意味着你的绝对定位的<div>标签将锚定在包装器上。

该网站的建设在相当僵化的方式，这是更好的堆叠和浮动元素自然比绝对位置在网站上的任何元素。这意味着你可能会在各种浏览器和移动设备中遇到问题。

如果你能澄清边界问题，我可能也能提供一个解决方案。