旧版浏览器的CSS3后备 [英] CSS3 fallback for older browsers

问题描述

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

I have made a circle using CSS3, trouble is in older browsers (ie7 etc) the circle appears as a square.

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

I know I could use a background image as a backup, but doesnt this defeat the point of using code?

如果我要把background-image放在哪里，它会在CSS？ >

If i was to put background-image in, where would it go in the 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 */
}

推荐答案

以下内容将为各种浏览器提供更好的支持，并且在不支持渐变效果时，您可以将其替换为纯色。

Using the following will provide better support for a variety of browsers and will fallback to a solid colour when gradients are not supported, you could replace this solid colour with an image.

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

You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.

这篇关于旧版浏览器的CSS3后备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！