他一直在为我父亲的新公司工作,并遇到了一个小问题。 我制作的东西在我的电脑上看起来不错,并决定上传并将链接发送给我父亲。他说按钮错了等等,所以他有一个旧版的网页浏览器。 这是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;
}
现在我只想要一个有过时网页浏览器的人访问该页面,只需将按钮更改为一个简单的方形框,并将其作为按钮。
我该怎么做?
提前致谢&amp;亲切的问候 戴夫。
答案 0 :(得分:2)
错误可能源于使用某些CSS2 / 3属性。检查this matrix和CSS3添加列表以了解更多信息。
如果您必须支持古老的IE浏览器,比如IE5,您可以使用conditional comments加载备用CSS。另一个解决方案是使用Modernizr进行特征检测,如上面的评论所示。
更新:this库在使用旧的Internet Explorer时可能会减轻一些痛苦。
无论如何,我强烈建议你的父亲将他的浏览器更新为更近期和更安全的浏览器。
此外,解散span
并将图像放在CSS background
属性中,因为它不是内容的一部分,而是表示。