internet-explorer - 我的导航菜单在 FF 和 Chrome 中运行良好，但在旧版本的 IE 中，它的纯文本看起来很糟糕

Question

这是我所做的。 如何在IE中制作类似于FF和Chrome的导航菜单？

Answer 1

好吧，并非所有浏览器都支持径向渐变，但是如果您愿意满足于从上到下的渐变，那就去吧：

/* SVG fallback(Opera 11.10-, IE9) */
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDg1LDg1LDg1LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoNTEsNTEsNTEsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);

/* Opera 11.10+ */
background: -o-linear-gradient(left, rgba(85,85,85,1), rgba(51,51,51,1));

/* Firefox 3.6+ */
background: -moz-linear-gradient(left, rgba(85,85,85,1), rgba(51,51,51,1));

/* Chrome 7+ & Safari 5.03+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(85,85,85,1)), color-stop(1, rgba(51,51,51,1)));

/* IE5.5 - IE7 */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FF555555,EndColorStr=#FF333333);

/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FF555555,EndColorStr=#FF333333)"

Answer 2

旧版本的 IE 不知道您正在使用以下 css：

background: -webkit-radial-gradient(bottom, #555, #333);
background: -moz-radial-gradient(bottom, #555, #333);
-webkit-transition: width .3s ease-in-out;
-moz-transition: width .3s ease-in-out; 

如果有人可以用 CSS3 和旧浏览器版本的替代品来回答这个问题，我会很感兴趣。但在那之前，我想你必须等到所有常见的浏览器都支持 CSS3。