Question

我使用CSS3创建了一个圆圈，麻烦在旧浏览器（即7等）中，圆圈显示为正方形。

我知道我可以使用背景图片作为备份，但是这不会妨碍使用代码吗？

如果我要将背景图像放入，那么它会在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 */
}

Answer 1

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

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中使用。

Answer 2

.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，它将覆盖第一行。

Answer 3

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

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

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

希望有所帮助。

旧版浏览器的CSS3后备版

3 个答案: