css - 旧 IE 浏览器中的 CSS 设计

Question

为什么在 IE 版本 < 11 中背景和菜单按钮形状无法正确显示？该页面在 Chrome、IE 11 等中看起来不错。

http://www.kine-stammheim.ch/

Answer 1

您可能正在使用 CSS3 属性，这些属性并非在所有版本的浏览器中都支持，并且在某些情况下需要特殊的前缀。

检查此链接http://www.w3schools.com/cssref/css3_browsersupport.asp

例如，您使用 css 制作的背景具有以下前缀：

-webkit-linear-gradient

-moz-linear-gradient

-ms-linear-gradient

-o-linear-gradient

在这里查看 -webkit-linear-gradient(

Answer 2

这是您对#main 的背景定义：

background: -moz-linear-gradient(center top , #DBDBDB, #FFFFFF) repeat scroll 0 0 rgba(0, 0, 0, 0);

IE 不理解 -moz 前缀

您需要完整的定义才能支持其他浏览器系列，例如：

background: rgb(69,72,77);
background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);

看：https ://www.google.de/search?q=vendor+specific+CSS+extensions

Answer 3

以一种类型中断但以另一种类型运行的网站通常与非法使用 HTML 或 CSS 有关。一些浏览器允许您做一些您实际上不允许做的事情，而其他浏览器则不允许。

使用w3.org HTML 验证服务来查找您网站上的错误 (HTML)，您可以在此处查看您的结果，您会发现您的网站上有一些错误。

您还可以使用w3.org CSS 验证服务来查找您网站上的错误 (CSS)，您可以在此处查看您的结果。

您会看到您的网站在 CSS 中有超过 100 个错误；这可能是您的问题的原因。修复您的 HTML 和 CSS，您的网站应该可以正常呈现。

还要检查可用的表格，看看哪些 CSS 和 HTML 属性适用于所有浏览器，有些还没有。

您可以使用Mozilla Developer Network来检查浏览器的兼容性。例如，让我们检查您在 CSS 中使用的-moz-属性；

Browser                     Lowest version    Support of
Internet Explorer           ---               ---
Firefox (Gecko)             1.0 (1.0)         -moz-appearance Not fully supported
Opera (Presto)              ---               ---
Safari | Chrome | WebKit    3.0 | 1.0 | 522   -webkit-appearance

您会发现在某些浏览器（如 Internet Explorer）上会出现问题。

您也可以在此处查看表格。

请注意，兼容性问题主要与最新版本的 HTML5 和 CSS3 有关。