用過時的瀏覽器訪問時替換網頁按鈕

他一直在爲我父親新公司的網頁工作，遇到了一個小問題。我做的東西看起來不錯，在我的電腦上，並決定上傳併發送鏈接給我的父親。他說按鈕是錯誤的等，所以他有一箇舊版本的網頁瀏覽器。這是一個按鈕的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

用過時的瀏覽器訪問時替換網頁按鈕

回答

相關問題