你~還在用IE6瀏覽器嗎?該換掉了哦,除了前陣子Google發佈自3/1起也就是今天將不支援IE6瀏覽器,而且也將Gear技術改成使用HTML5的最新技術,然後Youtube也將從3/13起也不支援IE6,而且也將慢慢的改用HTML5的新技術,所以如果你還在使用XP預設的IE6瀏覽器,再過不久你可能進到一些網站後會發現怎麼版面都亂七八糟,不然就是東缺西缺的,沒錯,這就是IE6的超級大問題,所以趕緊更換成其它瀏覽器或升級IE才是王道哦。
如果你已經準備好要放棄IE6了,請直接觀看其它瀏覽器吧!
IE8:https://steachs.com/archives/641
Google Chrome:https://steachs.com/archives/1427
Firefox:https://steachs.com/archives/1415
Opera:https://steachs.com/archives/890
Safari:https://steachs.com/archives/799
之前丫湯有介紹過在自己的網站上加入IE6提醒用戶的訊息,如果你想換個新樣式可以參考一下方的語法。
樣式展示:
在Header的<body>下方加入以下語法:
<!--[if lte IE 6]>
<div id="ie6warning">
<div id="warning"></div>
<div id="warningtext">您用的是舊版的IE6瀏覽器,強烈建議您升級為IE8或是使用Chrome、Firefox、Safari、Opera等瀏覽器</div>
<div id="opera"><a href="https://steachs.com/archives/890" title="前往Opera瀏覽器" alt="前往Opera瀏覽器"/>Opera</a></div>
<div id="safari"><a href="https://steachs.com/archives/799" title="前往Safari瀏覽器" alt="前往Safari瀏覽器"/>Safari</a></div>
<div id="chrome"><a href="https://steachs.com/archives/1427" title="前往Google Chrome瀏覽器" alt="前往Google Chrome瀏覽器"/>Chrome</a></div>
<div id="firefox"><a href="https://steachs.com/archives/1415" title="前往Firefox瀏覽器" alt="前往Firefox瀏覽器"/>Firefox</a></div>
<div id="ie"><a href="https://steachs.com/archives/641" title="前往IE8瀏覽器" alt="前往IE8瀏覽器"/>IE8</a></div>
</div>
<![endif]-->
然後CSS的部份:
#ie6warning{
background:#393d3e;
width:970px;
height:32px;
margin:15px auto;
padding-left:10px;
}
#warning{
background:url(http://image.steachs.com/ie6waring/warning.png) no-repeat;
height:32px;
width:32px;
float:left;
}
#warningtext{
padding:8px 10px 0;
font-size:13px;
color:#FFF;
float:left;
}
#ie a{
background:url(http://image.steachs.com/ie6waring/IE.png) no-repeat;
height:32px;
width:32px;
float:right;
text-decoration:none;
text-indent:-999em;
padding-right:5px;
opacity: 0.5;filter:alpha(opacity=50);zoom:1;
}
#ie a:hover{
background:url(http://image.steachs.com/ie6waring/IE.png) no-repeat;
height:32px;
width:32px;
float:right;
text-decoration:none;
text-indent:-999em;
padding-right:5px;
opacity: 1;filter:alpha(opacity=100);zoom:1;
}
#firefox a{
background:url(http://image.steachs.com/ie6waring/firefox.png) no-repeat;
height:32px;
width:32px;
float:right;
text-decoration:none;
text-indent:-999em;
padding-right:5px;
opacity: 0.5;filter:alpha(opacity=50);zoom:1;
}
#firefox a:hover{
background:url(http://image.steachs.com/ie6waring/firefox.png) no-repeat;
height:32px;
width:32px;
float:right;
text-decoration:none;
text-indent:-999em;
padding-right:5px;
opacity: 1;filter:alpha(opacity=100);zoom:1;
}
#chrome a{
background:url(http://image.steachs.com/ie6waring/chrome.png) no-repeat;
height:32px;
width:32px;
float:right;
text-decoration:none;
text-indent:-999em;
display:block;
padding-right:5px;
opacity: 0.5;filter:alpha(opacity=50);zoom:1;
}
#chrome a:hover{
background:url(http://image.steachs.com/ie6waring/chrome.png) no-repeat;
height:32px;
width:32px;
float:right;
text-decoration:none;
text-indent:-999em;
padding-right:5px;
opacity: 1;filter:alpha(opacity=100);zoom:1;
}
#safari a{
background:url(http://image.steachs.com/ie6waring/safari.png) no-repeat;
height:32px;
width:32px;
float:right;
text-decoration:none;
text-indent:-999em;
padding-right:5px;
opacity: 0.5;filter:alpha(opacity=50);zoom:1;
}
#safari a:hover{
background:url(http://image.steachs.com/ie6waring/safari.png) no-repeat;
height:32px;
width:32px;
float:right;
text-decoration:none;
text-indent:-999em;
padding-right:5px;
opacity: 1;filter:alpha(opacity=100);zoom:1;
}
#opera a{
background:url(http://image.steachs.com/ie6waring/opera.png) no-repeat;
height:32px;
width:32px;
float:right;
text-decoration:none;
text-indent:-999em;
padding-right:10px;
opacity: 0.5;filter:alpha(opacity=50);zoom:1;
}
#opera a:hover{
background:url(http://image.steachs.com/ie6waring/opera.png) no-repeat;
height:32px;
width:32px;
float:right;
text-decoration:none;
text-indent:-999em;
padding-right:10px;
opacity: 1;filter:alpha(opacity=100);zoom:1;
}
