用过时的浏览器访问时替换网页按钮

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

}

现在，我只是想，如果有人用一个过时的网页浏览器访问页面时，它只会改变按钮，一个简单的方盒子用一句话作为按钮。

我该怎么做到这一点？

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

来源

2013-05-05 David Vandenbroucke

使用像Modernizr或特定的css文件的浏览器库使用条件CSS。 – 2013-05-05 12:18:23

查看本网站[CanIuse]（http://www.caniuse.com/），然后点击您正在使用的CSS3和HTML5的每个属性，以了解哪些浏览器和版本支持它们，然后以@ eric.itzhak表示使用Modernizr或者对于非支持浏览器的替代CSS。 – 2013-05-05 12:23:08

错误可能是由于使用了一些CSS2/3属性而引起的。检查this matrix和CSS3添加列表以了解更多信息。

如果您必须支持古老的IE浏览器，比如IE5，则可以使用conditional comments加载备用CSS。另一个解决方案是使用Modernizr进行功能检测，如上面的注释中所建议的。

更新：this使用旧版Internet Explorer时，图书馆可能会缓解一些痛苦。

无论如何，我会强烈建议你的父亲将他的浏览器更新到更新和安全的浏览器。

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

来源

2013-05-05 12:29:15

哦，是的，你对这个跨度是对的;）！我会稍微弄个这些库，希望今晚能修好。 – 2013-05-05 12:38:06

用过时的浏览器访问时替换网页按钮

回答

相关问题