旧浏览器的 CSS3 后备答案

【问题标题】：CSS3 fallback for older browsers旧浏览器的 CSS3 后备
【发布时间】：2013-05-29 10:20:08
【问题描述】：

我使用 CSS3 制作了一个圆圈，问题是在旧版浏览器（ie7 等）中，圆圈显示为正方形。

我知道我可以使用背景图像作为备份，但这不会破坏使用代码的意义吗？

如果我要放入背景图像，它会在 CSS 中的什么位置？

.ButtonB:hover, .ButtonB.hover {
    background: -moz-linear-gradient(
        center top,
        rgba(255, 255, 255, .2) 0%,
        rgba(255, 255, 255, .1) 100%
    );/* FF3.6 */
    background: -webkit-gradient(
        linear,
        center bottom,
        center top,
        from(rgba(255, 255, 255, .1)),
        to(rgba(255, 255, 255, .2))
    );/* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
}

【问题讨论】：

所有这些代码都是一个小圆圈...为什么不将图像用于所有浏览器？所有这些代码将来可能需要更改，因为您使用的是浏览器特定的标签。然而.ButtonB:hover, ButtonB.hover { background: url('yourpathtoimage'); } 工作完成，所有浏览器。

标签： css gradient fallback

【解决方案1】：

.ButtonB:hover, .ButtonB.hover {
    background: url('yourpathtoimage'); /* for old browsers */
    background: -moz-linear-gradient(
        center top,
        rgba(255, 255, 255, .2) 0%,
        rgba(255, 255, 255, .1) 100%
    );/* FF3.6 */
    ...
}

在这种情况下，如果浏览器支持linear-gradient，它将覆盖第一行。

【讨论】：

【解决方案2】：

使用以下将为各种浏览器提供更好的支持，并在不支持渐变时回退到纯色，您可以将这种纯色替换为图像。

background: #0A284B;  /* for images use #0A284B url(image.jpg)*/
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

您需要指定height 或zoom: 1 以将hasLayout 应用于元素，以便在IE 中工作。

【讨论】：

感谢您的帮助，我将使用此代码。我想我会选择背景图片，因为正方形看起来不太好。
谢谢。对我来说，诀窍是把单色背景放在第一位。

【解决方案3】：

您正在使用旧版浏览器不支持的大量 CSS 功能 - 渐变、Alpha 通道透明度，也可能是边框半径。

简短的回答是，通常最好的答案是简单地离开它，让真正旧的浏览器以不同的方式显示它；它可能看起来不像你想要的那么漂亮，但如果它在 IE7 中可用，那么你可能已经做得足够了。

如果您确实需要在 IE7 和其他旧浏览器中支持这些功能，那么您可能需要查看 CSS3Pie，它为 IE 中的所有功能提供了基于 javascript 的后备解决方案，我可以看到您在此处使用.下载脚本并按照网站上的说明进行设置。

希望对您有所帮助。

【讨论】：

只是一个指针，CSS3 Pie 可以让网页变得很慢。特别是具有大 DOM 的页面
@Blowsie ：你的意思是它只会在旧 IE 版本上使网页变得非常慢，还是它也会影响新的 IE 版本/其他浏览器？
@AndreaLigios 它使用特征检测，因此在现代浏览器上开销并不大，但它会削弱 IE。