如何在所有浏览器中实现一致的布局?

我发现避免痛苦的最佳策略是遵循以下规则:

2. 使用严格的doctype-您不一定需要 完美的
3. reset style sheet . 请注意,根据工作表的内容,此项可能与#2的目标不兼容。
6. 接受它不是完美的,不要担心真正的小差异

遵循这些规则,一开始就不会有那么多问题。

有关TODO参考,请参见以下问题:
https://stackoverflow.com/questions/72394/what-should-a-developer-know-before-building-a-public-web-site

您需要正确的doctype,以便页面以符合标准的模式呈现。

W3C: Recommended list of DTDs

尽可能遵守标准。这就是构建浏览器的目的,因此这是您可以找到的最佳共同点。此外,这也是浏览器将来将遵循的原则,因此您可以对代码在将来的浏览器版本中的工作方式做出最佳的预测。

生成时,首先在不是Internet Explorer的浏览器中测试页面。如果你第一次构建IE,你将依赖于它的渲染错误,然后你将有很大的问题,使它在没有这些错误的浏览器中看起来一样。Firefox是最常见的非IE浏览器,也是遵循标准的最中立的浏览器之一。

尽量使布局简单、健壮,如果可能的话,尽量保持html的原始语义。搜索引擎在一些元素中查找内容,这些元素是为搜索引擎而设计的,比如搜索引擎中的标题 h1 p 标记,因此通过遵循标记的原始意图,您可以使页面在web上更可见。

您可能需要添加一些额外的样式来抑制IE中的怪癖,比如为应该自己计算高度的元素指定高度,添加display:inline;对浮动元素(仍将是块元素)修改IE的内部呈现标志,或使用overflow:hidden抑制IE使所有元素至少高一个字符的冲动。在这两种方法都有效的地方使用填充而不是边距,因为IE在正确折叠边距方面存在问题。

我是一个IE迷,但当我在IE中看起来不错,而Firefox却做对了/错了,这让我抓狂。我知道Firefox更接近标准,但IE做出了很好的假设。。。所以

啊!)

首先向符合标准的浏览器编码,然后使用 conditional stylesheets 要解决不同版本的IE中的问题,大多数其他问题都是次要的,IE通常需要最大的努力才能使其匹配。

除了Joel的答案之外,我还发现尽可能让事情变得简单也很有帮助。此外,使用包装div有很大帮助-您可以将简单样式应用于包装器,这些包装器应该可以在所有浏览器中工作。

我的过程如下:

1. 在photoshop中勾勒出大致的布局构思。甚至在一张纸上。
2. 在photoshop中模拟屏幕快照(此处插入fav photoeditor)。
4. 决定哪些浏览器需要与之兼容。
5. 使用这些浏览器测试站点的每个主要设计更改
6. 有一些 CSS hacks
7. 最后一步是在所有测试浏览器中查看最终产品。会有细微的差别,这是你需要决定何时划界的地方。因为很多时间都可以轻松地用来推动像素。

width: 50px;
*width: 45px;  /* IE-7 Hack */

这是通过使用一点无效的CSS(*)来实现的。列出的其他浏览器会正确地忽略这种攻击,但IE-7会读取它。在最后读取时,将应用它

提示:考虑实际 browser market share . 这可能与您的实际访客存在显著差异。记录哪些浏览器在将来某个时间访问您的站点,并确保您至少覆盖了大多数浏览器版本

使用嵌套表进行设计。 另一种方法是:只需将站点创建为大图像,而不是html。 缺点是速度慢,限制了功能。

这听起来很傻,但对于每个请求,您都可以将所有内容呈现到单个图像文件中,然后只使用该文件响应请求。

可以