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

在我的小学习项目中,我即将结束重复警报.它仍然充满了错误,但由于这是一个周末项目,我正在缓慢地纠正它们.我的问题是跨浏览器的布局不一致.

目前,我正在尝试My Alarms在登录后改进" "框(只是不要试图破解我的网站,它仍然非常不稳定).

题

你可以给我什么样的技巧,黑客,技巧等,以确保跨浏览器布局的兼容性？

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

建立一个更兼容和开发人员友好的浏览器,如firefox首先,定期在IE(和safari/chrome(webkit)和歌剧)测试彻底.

使用严格的doctype-你不一定需要完美的标记,但它应该非常好 - 足以避免浏览器怪癖模式,因为怪癖根据定义不是标准的

使用重置样式表.请注意,根据工作表的内容,此项目可能与#2的目标不兼容.

使用像jQuery或Prototype这样的javascript框架 - 他们可以隐藏一些javascript和DOM不兼容性.

使用良好的语义布局 - 对于错误行为的浏览器,它更有可能降级

接受它不会是完美的,并且不会出现真正的小差异

遵循这些规则,首先没有那么多问题.

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

您需要适当的doctype,以便页面呈现符合标准的模式.

W3C:推荐的DTD列表

尽可能遵守标准.这就是构建浏览器所遵循的内容,因此这是您可以找到的最佳共同点.此外,这也是未来浏览器将遵循的内容,因此您可以最好地预测代码在未来浏览器版本中的运行方式.

构建时,首先在不是Internet Explorer的浏览器中测试页面.如果您首先为IE构建,那么您将依赖于它的渲染错误,然后您将遇到很大的问题,使其在没有这些错误的浏览器中看起来相同.Firefox是最常见的非IE浏览器,在遵循标准方面也是最中立的浏览器之一.

Firefox的Firebug插件让您可以准确地看到每个元素应用的样式,还可以实时调整样式,这是一个非常方便的工具.

尽量使布局尽可能简单和健壮,并尽可能保持html的原始语义.搜索引擎会查找用于其中的元素中的内容,例如h1标记中的标题和标记中的文本p,因此,通过遵循标记的初始意图,您可以使网页在Web上更加清晰可见.

您可能需要添加一些额外的样式来抑制IE中的怪癖,比如指定应该自行计算高度的元素的高度,添加display:inline; 浮动元素(仍然是块元素)来调整IE的内部渲染标志,或使用overflow:hidden来抑制IE的冲动,使所有元素至少有一个字符高.使用填充而不是边距,因为IE有正确折叠边距的问题.

仅使用条件标记作为最后的手段.通过使用特定于版本的代码,您将获得可能必须为发布的每个新浏览器版本维护的代码.