3

我使用 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 */
}
4

3 回答 3

6

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

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 中工作。

于 2013-06-03T09:48:43.030 回答
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，它将覆盖第一行。

于 2013-06-03T09:42:51.660 回答
2

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

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

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

希望有帮助。

于 2013-06-03T09:51:15.677 回答