为什么同样的网站在不同的浏览器中看起来不同？

这是许多网站管理员和营销人员不时遇到的一个相当普遍的问题。这有点违反直觉——你会认为一旦你的网站启动并运行，它应该在任何计算机和任何浏览器上看起来都一样，无论如何。

不幸的是，情况并非总是如此。不同的浏览器通常会以略微不同的方式解释或显示网站源代码（如HTML和CSS），从而导致同一网站的外观和感觉相应不同。

如果这些差异不影响网站的功能，不必担心。

话虽如此，以下是网站在不同浏览器中可能看起来不同的一些最常见原因，以及可以采取哪些措施来最大程度地减少这些差异。

浏览器以不同方式显示常见的“默认”网站元素

这可能是显示网站时浏览器间差异的最普遍原因，通常无需担心。

如果网站使用单选按钮、普通按钮、错误消息等HTML元素，这些元素通常会在浏览器级别以特定的“默认”方式设置样式（如果有自定义CSS和HTML样式，则不适用这些元素以某种方式）。

同样，这些细微的风格差异是每个浏览器的功能，不会导致网站出现任何功能问题。如果确实需要标准化所有内容，可能需要通过CSS或HTML手动设置这些元素的样式，而不是使用“浏览器默认”样式。

不同的浏览器可能不支持某些HTML/CSS

这个有点棘手。基本上，HTML和CSS的语言一直在发展和变化。每当HTML或CSS有新的添加，语言的新版本发布，或者其中的某些内容被删除时，浏览器都需要追赶并确保它们添加支持、更改支持或删除支持为了适应这些变化。

一个很好的例子是CSS3（CSS 的最新迭代）中包含的新“flexbox”布局模式。Flexbox本质上是一种方便、简单的HTML页面布局方式——它确保HTML元素在调整页面布局大小、更改等时“行为可预测”。

但是因为flexbox是CSS的新成员，所以有几个浏览器还不支持它。如果这些浏览器渲染一个使用flexbox的网页，它们将无法“理解”该语言，并且网页看起来会损坏或设计不佳，即使它在不同的浏览器上看起来完全正常。

此类问题有多种解决方案和变通方法。最常见的解决方法是为网站设置多个样式表。基本上，首先只使用一个浏览器来设计和测试网站——无论哪种浏览器最受用户欢迎。

在该浏览器上完成所有工作后，可以专门为那些不支持特定HTML/CSS属性的浏览器创建不同的样式表。使用这种方法可能很难确保网站具有完全统一的“外观”，但至少可以确保任何用户都不会看到任何问题。

硬件或“计算机设置”差异

如果网站在不同的浏览器中看起来不同，但还使用两台不同的计算机，则可能根本不是浏览器问题。

当从一台计算机转到另一台计算机时，一切都会发生变化。也许第二台计算机的屏幕分辨率与第一台不同，或者色彩平衡不同。如果使用两种不同的操作系统查看网站，几乎可以保证两者之间的某些内容会有所不同。

这些计算机级别的变化通常表现为尺寸差异、色彩平衡差异等。除了屏幕分辨率问题之外，大多数这些差异都超出了控制范围。

如果发现网站在某些分辨率级别下看起来更糟，可以将特定分辨率的“媒体查询”写入您的 CSS，根据访问者的分辨率重构/重新设计网站元素。

差异

重要的是要记住，永远无法在访问者使用的所有浏览器、计算机和设置组合中统一显示一个网站。主要关注点应该是确保尽可能多的配置的功能。

即使网站在某些浏览器上看起来不太一样，用户至少应该能够以相同的方式与它进行交互，无论他们使用什么浏览器。

同样，实现这一目标的最佳方法是使用大多数用户使用的任何浏览器最初设计和测试网站。然后，当我们对所有内容的外观和功能感到满意时，就可以开始解决其他浏览器上可能出现的问题。

将网页设计提升到一个新的水平

如果需要新网站设计或旧网站重新设计，或者只是在寻找有关网页设计的更多信息，玄北可以提供帮助！

我们的网页设计师专家团队已经看到了这一切。我们已经建立了数百个与所有当前浏览器兼容的华丽网站，我们很乐意为您和您的公司做同样的事情。

over~~~