0

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

更多信息：

看起来它以 PC 为中心，但不在 Mac 上。一个朋友有一台 PC，它确实居中，而在我的 Mac 上却不是。地址是 bellfortchurchofchrist.com

更新：添加了以下答案建议的一些代码，这里是在 PC 上：

在此处输入图像描述

这是在我的 Mac 上的 Safari 上：

在此处输入图像描述

4

1 回答 1

0

这是对齐问题的答案，我不知道您对边框的含义是什么，对我来说，在 OS X 上的 Chrome 中，该站点的背景为黑色，没有边框。

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

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

标签应该在 之后立即开始<body>并在之前关闭</body>。

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

该网站的构建方式相当不灵活，自然堆叠和浮动元素比网站中的绝对位置元素要好。这意味着您可能会在各种浏览器和移动设备中遇到问题。

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

于 2013-01-28T22:47:20.553 回答