1

他一直在为我父亲的新公司制作网页，遇到了一个小问题。我做的东西在我的电脑上看起来不错，决定上传并将链接发送给我父亲。他说按钮错了等等，所以他有一个旧版本的网络浏览器。这是一个按钮的 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;

}

现在我只希望如果有人使用过时的网络浏览器访问该页面，它只会将按钮更改为一个简单的方形框，并将其作为按钮。

我该怎么做？

在此先感谢和亲切的问候戴夫。

4

1 回答 1

2

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

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

更新：这个库在使用旧的 Internet Explorer 时可能会减轻一些痛苦。

无论如何，我强烈建议您的父亲将他的浏览器更新为更新且安全的浏览器。

此外，解散span并将图像放在 CSSbackground属性中，因为它不是内容的一部分，而是演示文稿的一部分。

于 2013-05-05T12:29:15.590 回答