html - 在每个浏览器的网站上调整宽度

时间：2013-01-28 21:56:31

标签： html browser

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

更多信息：

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

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

enter image description here

这是在我的Mac上的Safari：

enter image description here

答案 0 :(得分：0)

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

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

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

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

这会为网站提供固定的宽度，使用margin将其居中，而position:relative将意味着您的绝对定位<div>标记会封闭包装。

网站的构建方式非常灵活，最好是自然地堆叠和浮动元素，而不是网站中的绝对位置元素。这意味着您可能会遇到各种浏览器和移动设备中的问题。

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