Question

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

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 validation service查找您网站上的错误（HTML），您可以查看结果here，您会发现自己的网站出现了一些错误。

您还可以使用w3.org CSS validation service查找网站上的错误（CSS），您可以查看结果here。

您将看到您的网站在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。

您还可以查看表格here。

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

旧IE浏览器中的CSS设计

3 个答案: