网站的跨浏览器/平台支持答案

【问题标题】：Cross-Browser/Platform Support for Website网站的跨浏览器/平台支持
【发布时间】：2012-08-18 19:01:02
【问题描述】：

我设计了网站：http://piratesofpopulous.comli.com/ 我仍在努力，但有一个问题，我的网站似乎对所有浏览器都没有相同的设计，在 Chrom 和 Mozilla 中，你可以在少数东西上看到半径，但在 IE 中它没有显示并且布局完全搞砸了，你能告诉我如何修复它吗？

我的“边框半径和边距”在 IE 中没有正确显示，在 IE 中是否可以这样做？我没有在 PHP 和 HTML 中定义文档类型，会不会有问题？

另外，我所有的页面都是 *.php 格式。他们有 HTML，但扩展名是 .PHP，那么，我是否需要为 IE 支持定义文档类型和其他一些边框半径属性？

请帮忙，否则我的部落成员将不会加入我的网站。

【问题讨论】：

实际上不是 PHP 类别问题 :(
您使用什么版本的 IE 进行测试？
IE 出现问题是正常的，也是意料之中的。它是这个星球上最糟糕的浏览器。充其量是无能。
我使用的是 IE-8，但最近一个小时前更改为 IE-9，考虑 HTML5 和 CSS3 支持，但仍然...边框半径和框阴影在其中不起作用, 但是 Chrome 和 Mozilla 可以正确显示它。我在这里测试了浏览器html5test.com，Chrome 得分最高，而 IE-9 得分最少：D

标签： html internet-explorer cross-browser

【解决方案1】：

首先，你问doctype是否重要，答案是非常大的YES。

将以下行添加到 HTML 代码的最顶部（<html> 标记上方）：

<!DOCTYPE html>

这应该有助于解决边距和其他奇怪的布局问题。如果没有 doctype，IE 就会进入“怪癖模式”，这是一种非常古老的模式，与所有其他浏览器的工作方式都不同。

如果您使用的是 IE9，它也可能有助于解决 border-radius 和 box-shadow 问题：IE9 确实支持这些功能，但在 quirks 模式下可能不支持它们。

如果您使用的是 IE8 或更早版本，则浏览器根本不支持 border-radius 或 box-shadow。我的建议是让 Ie8 用户在没有这些功能的情况下生活；您的网站可能看起来不太好，但可以使用，并且可能会鼓励他们升级浏览器。

如果你真的想在 IE8 中支持这些功能，有一个名为 CSS3Pie 的脚本可以为 IE 添加 border-radius 和 box-shadow 功能。单击链接下载它并按照说明在您的站点上进行设置。是否值得让 IE8 看起来更好看。

希望对您有所帮助。

【讨论】：

我使用的是 IE-8，但我改为 IE-9，我在 index.php 中添加了但现在仍然有效，border-radius 和 box-shadow 不起作用，在 Mozilla 和 Chrome 中没关系
希望它解决了边距和其他布局问题？您还应该检查您的 IE 是否处于 IE9 模式，而不是 IE8 兼容模式（甚至是 IE7 兼容模式）。 box-shadow 和 border-radius 在 IE9 中有效，但不适用于这些模式。为此，您需要 CSS3Pie hack，就像使用 IE8 或 IE7 的真实副本一样。（您可以在IE的开发者工具窗口中查看和更改模式；按F12查看）
好的，但是如果我的客户访问该页面，他们应该不需要这些东西，不是吗？
CSS3Pie 是您添加到网站的脚本。它基本上只是另一个 Javascript 文件（它的工作方式与大多数 JS 有点不同，但仅此而已）。所以不，您的用户不需要做任何特别的事情；是您将其添加到网站，而不是您的用户。
哦，我还以为是萤火虫之类的插件，在哪里可以得到呢？

【解决方案2】：

我认为你的部分问题是你的 css 中缺少这样的东西来支持浏览器部落。

-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 6px rgba(0,0,0,0.3);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;

【讨论】：