更换网页按钮时，访问过时的浏览器

Question

hey我一直在为我父亲的新公司制作网页，然后遇到了一个小问题。我做的东西在我的电脑上看起来不错，我决定上传并把链接发给我父亲。他说按钮有问题等等，所以他使用的是旧版本的浏览器。这是HTML &按钮的CSS代码

<div class="menu-g">
            <a href="genuine.html">
                <span class="menu-g-slide-text">Genuine</span>
                <img src="images/menug.png" alt="icon" />
            </a>
        </div>
.mid .menu .menu-g {
background: #e5e5e5;
height: 90px;
width: 170px;
display: inline-block;
position: relative;
border: 2px solid #e10613;
box-shadow: 
    0px 1px 1px rgba(255,255,255,0.8) inset, 
    1px 1px 3px rgba(0,0,0,0.2);
border-radius: 4px;
clear: both;
margin: 10px 0px;
overflow: hidden;
transition: box-shadow 0.3s ease-in-out;
left: 50px;

}
.mid .menu .menu-g img{
position: absolute;
left: 50px;
top: 5px;
border: none;
transition: all 0.3s ease-in-out;
}
.mid .menu .menu-g .menu-g-slide-text{
position: absolute;
font-size: 36px;
left: 20px;
color: #333;
opacity: 0;
text-shadow: 0px 1px 1px rgba(255,255,255,0.4);
transition: opacity 0.2s ease-in-out;
text-align: center;
vertical-align: middle;
line-height: 90px;  
}
.mid .menu .menu-g:hover{
box-shadow: 
    0px 1px 1px rgba(255,255,255,0.8) inset, 
    1px 1px 5px rgba(0,0,0,0.4); 
border-top: 7px solid #e10613;
border-bottom: 7px solid #e10613;
border-left: none;
border-right: none;
position: relative;
top: -5px;
}
.mid .menu .menu-g:hover img{
transform: scale(10);
opacity: 0;
}
.mid .menu .menu-g:hover .menu-g-slide-text {
opacity: 1;
text-align: center;
vertical-align: middle;
line-height: 90px;
}
.mid .menu .menu-g:active {
position: relative;
top: -2px;
background: #CCC;
box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
}

现在我只是想如果有人用过时的浏览器访问这个页面，它会把按钮变成一个简单的方形框，里面有一个词it as button。

我该怎么做呢?

提前感谢&亲切的问候戴夫。

Answer 1

这个错误可能是由于使用了一些CSS2/3属性引起的。查看这个矩阵和CSS3添加列表以了解更多信息。

如果你必须支持旧的IE浏览器，比如IE5，你可以使用条件注释来加载备用CSS。另一个解决方案是使用Modernizr进行特征检测，正如上面的评论所建议的那样。

更新:此库可能会减轻使用旧Internet Explorer时的一些痛苦。

无论如何，我强烈建议你父亲把浏览器更新到最新的、更安全的版本。

此外，溶解span并将图像放入CSS background属性中，因为它不是内容的一部分，而是表示的一部分。