网站的跨浏览器兼容性

Question

我正在设计一个使用bootstrap，HTML，CSS，CSS3和PHP作为服务器端语言的网站。但是当我在不同的浏览器上检查它时，通过检查HTML元素的某些外观和功能，我发现它与所有浏览器不兼容。我希望我的网页应该在每个浏览器上查看。

我想知道：

1）在设计跨浏览网站时我们需要考虑哪些方面？

2）我如何设计一个可以在不同浏览器上提供相同输出的页面。

Answer 1

你的问题与PHP无关。 PHP在服务器上运行并生成（HTML）输出。该输出必须与浏览器兼容，但它不是特定于PHP以获得它。因此，我已从您的标题和标签中删除了PHP。

剩下的问题：

1. 要考虑的第一个方面是，没有两个浏览器是相同的。即使您拥有相同的浏览器，它们也可以在不同的计算机上运行，​​具有稍微不同的更新，在不同的屏幕尺寸上运行等等。

此外，浏览器已经内置了自己的CSS。h1元素有一个粗体字体。不同浏览器的确切大小，系列和大胆程度可能会有所不同。因此，许多网站将以CSS Reset开头（谢谢，@ Vucko）。这基本上是一堆你可以包含的CSS代码，它会删除所有标记，或者至少在浏览器中使它们相同。

但即使在那之后，也不要瞄准像素完美。有时几乎已经足够好了。

这尤其适用于不重要的功能。例如，旧的IE浏览器不支持圆角和阴影，或者看起来可能略有不同。我没有通过构建大型HTML结构和添加背景图像来模仿这些CSS功能，而是认为你应该减少损失并接受阴影不会显示或角落平方，否则网站工作正常。

遵循标准是件好事。如果您遵循标准，并确保您的HTML有效，它将在大多数浏览器中显示几乎相同。

可能仍然存在差异，尤其是如果您使用并非所有浏览器都完全支持的新功能。使用广泛支持的功能，可归结为大量练习，大量知识，并且至少能够使用这些网站：

• http://validator.w3.org/ - 检查您的网站是否有效。
• http://caniuse.com/ - 对特定HTML / CSS功能的浏览器兼容性的概述。
• http://www.quirksmode.org/ - 类似的网站。

特别是那些概述非常有帮助。您可以一目了然地看到是否支持某项功能，以及CSS中是否需要特殊的CSS前缀（如-webkit-）以使其适用于某些浏览器。

1. 答案实际上和1：Don不一样。在最重要的浏览器上使其看起来很好，并使其适用于不太重要的浏览器。如果浏览器真的老了，不要关心它。仍然支持的最古老的Windows是Vista。 Vista将运行IE到版本9.因此IE8-用户应该只升级他们的浏览器。如果你确实想要支持它，只有使它工作并且看起来合理，但不要试图让它像素完美。不要在任何浏览器中尝试这样做。

Answer 2

1）在使用任何html5元素之前。只需查看caniuse.com即可。查看它是否与您想要的浏览器兼容。如果您迫切希望使用该元素，请提供错误回调或仅提供替代回调。

2）在浏览器上使用-webkit-或-moz-等前缀作为部分支持的css规则（您可以查看caniuse）。如果他们根本不支持该规则，则回退到图像但是页面加载。您还可以使用像normalize.css这样的cssreset库来标准浏览器的默认样式。