html - 在网站设计中，每个浏览器的宽度和高度都是不同的。如何防止这种情况

Question

我是设计网站的新手。我在linux中使用chrome。我已经在 Windows 中用 chrome 测试了我的网站。我遇到了一个问题，例如高度和宽度不同？如何使我的网站设计与所有浏览器兼容。如果这个问题来自单位意味着哪个单位最好像 em、px 或 %？

score 2 · Accepted Answer

这是一个实际的设计选择。您可以使用固定大小，或使您的网站流动。

固定尺寸意味着您定义要设计的宽度。一个非常受欢迎的选择是 960 像素，因为它与 1024 像素宽的屏幕兼容，两侧有一些空间和一个滚动条。

如果您选择此方法，您需要在整个网站周围有一个包装元素（例如，<div id="wrapper">在您的<body>标签之后，在您的文档末尾关闭（基本上您的所有网站都进入其中）。然后您可以拥有 CSS 规则：

#wrapper { 
  width: 960px; 
  margin: 0 auto;
}

这将使您的整个网站在屏幕上水平居中。这种方法的优点是，由于您的宽度是已知的，您可以轻松测量和计算内部元素（例如侧边栏等）的宽度。这在处理广告展示位置时非常方便。

流体大小意味着您将宽度定义为可用屏幕空间的百分比。这种方法以前主要用于全角网站，（想象#wrapper上面的元素设置为width: 100%。在我个人看来，这种方法本身很麻烦，只适用于特殊情况。

最后但同样重要的是，当前的趋势是响应式设计。该方法使用 CSS媒体查询根据可用宽度加载不同的样式，具体实现可以使用上述任何一种。

score 0 · Accepted Answer

我在不同的浏览器之间遇到了同样的问题。作为最后的手段，您可以尝试对发现大小变化的每个浏览器对使用 css hack。

示例：这是一个简单的 hack IE，在 css 之前添加下划线 (_)

_height:200px;

希望这可以帮助：）

2 回答 2