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

时间：2009-03-04 17:52:41

标签： javascript jquery html css

我快要结束我little learning project的重复警报了。它仍然充满了错误，但由于这是一个周末项目，我正在缓慢地纠正它们。我的问题是跨浏览器的布局不一致。

目前，我正在尝试在登录后改进“My Alarms”框（只是不要试图破解我的网站，它仍然非常不稳定）。

问题

您可以提供哪些技巧，黑客技巧，技巧等，以确保跨浏览器布局兼容性？

8 个答案:

答案 0 :(得分：43)

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

  1. 首先在firefox中构建一个更兼容和开发人员友好的浏览器，定期在IE（以及safari / chrome（webkit）和opera）中进行彻底测试。
  2. 使用严格的文档类型 - 你不一定需要完美的标记，但它应该非常好 - 足以避免浏览器怪癖模式，因为根据定义，怪癖不是标准的
  3. 使用reset style sheet。请注意，根据工作表的内容，此项目可能与＃2。
    4. 的目标不兼容
  4. 使用像jQuery或Prototype这样的javascript框架 - 它们可以隐藏一些javascript和DOM不兼容性。
  5. 使用良好的语义布局 - 对于行为不当的浏览器，它更有可能降级
  6. 接受它不会是完美的并且不会出现真正的小差异

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

    对于TODO参考，请参阅此问题：
    https://stackoverflow.com/questions/72394/what-should-a-developer-know-before-building-a-public-web-site

答案 1 :(得分：5)

您需要一个合适的doctype，以便页面呈现符合标准的模式。

W3C: Recommended list of DTDs

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

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

Firefox的Firebug插件可让您准确了解每个元素应用的样式，还可以实时调整样式，这是一个非常方便的工具。

尝试使布局尽可能简单和健壮，并尽可能保持html的原始语义。搜索引擎会查找用于其中的元素中的内容，例如h1标记中的标题和p标记中的文字，因此，通过遵循标记的初始用途，您可以使页面更多在网上可见。

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

仅将条件标签用作最后的手段。通过使用特定于版本的代码，您可以获得为每个已发布的新浏览器版本维护的代码。

答案 2 :(得分：2)

针对FireFox进行设计和测试......

然后进行在IE中工作所需的一些更改。

我是一个IE浏览器的人，但是当我在IE中看起来很好并且Firefox正确/错误时，这会让我发疯。我知道Firefox更接近标准，但IE做出了很好的假设......所以

哎呀！ ）

答案 3 :(得分：1)

首先使用符合标准的浏览器编码，然后使用conditional stylesheets修复各种版本的IE中的问题。大多数其他问题都是次要问题，IE通常需要尽最大努力才能使其匹配。

答案 4 :(得分：1)

除了Joel的回答之外，我发现尽可能简化事情也很有帮助。此外，使用包装div有很大帮助 - 您可以将简单样式应用于应该适用于所有浏览器的包装器。

答案 5 :(得分：0)

我努力确保我的网站设计与浏览器兼容。 我的流程如下：

  1. 在photoshop中绘制粗略的布局理念。甚至在一张纸上。
  2. 在photoshop中模拟一个屏幕截图（在这里插入fav photoeditor）。
  3. 根据上述设计开始构建网站。
  4. 决定哪些浏览器与哪些浏览器兼容。
  5. 使用这些浏览器测试每个主要设计更改的网站
  6. 我有一些CSS hacks被迫使用以使所有目标浏览器都能正常工作。我试图避免屈服于这些，因为它们可能会在未来的浏览器版本中出现更长时间的意外副作用。
  7. 最后一步是检查所有测试浏览器中的最终产品。会有一些细微差别，这是您需要决定何时绘制线的地方。因为可以很容易地花费很多时间来推动像素。

    8. 一般来说，我的目标是前4个浏览器：IE-7，IE-8，FF，Chrome＆amp;苹果浏览器。我最近使用CSS hack来解决IE-7的问题：

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

    这可以通过使用一些无效的CSS（*）列出的其他浏览器将正确地忽略这个hack，但IE-7读取它。正如它最后一样被应用

    提示：考虑实际的browser market share。这可能与您的实际访问者显着不同。记录哪些浏览器将来访问您的网站，并确保您至少覆盖大部分浏览器+版本

答案 6 :(得分：-4)

我的遗忘之门： 使用嵌套表进行设计。 另一种方法是：只需将您的网站创建为大图像而不是html。 缺点是，它很慢并且限制了功能。

答案 7 :(得分：-4)

这听起来很愚蠢，但是对于每个请求，您可以将所有内容呈现为单个图像文件，然后使用除了该文件之外的任何其他内容来响应请求。

好？

相关问题
最新问题