不知道還有多少人需要考慮到ie7的兼容問題啊，反正我最近是被折磨的夠嗆，前兩天才遇到一個問題，在說明這個問題之前，先把測試代碼放上來吧
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CANVAS</title>
<style type="text/css">
.title{
color:red;
font-size: 16px;
text-decoration: underline;
}
.icon{
color:blue;
text-decoration: none;
}
</style>
</head>
<body>
<button id="test">ie7測試</button>
<script type="text/javascript">
document.getElementById("test").onclick=function(){
var span=document.createElement("span"),
icon=document.createElement("i");
span.innerHTML="ie7 bug 測試";
span.setAttribute("class","title");
icon.innerHTML="yellow text";
icon.setAttribute("class","icon");
document.body.appendChild(span);
document.body.appendChild(icon);
}
</script>
</body>
</html>ie8以上的瀏覽器，.title和.icon的樣式都應用上了，ie7下樣式是有問題的
很明顯了應該，就是新增加的節點的樣式沒有應用上去，雖然在查看頁面結構的時候，類名已經都在了，但是樣式還是木有。百度之後別人說改變元素的display屬性可以觸發樣式重新加載，但是不知道是我試的方法不對還是怎麼着，沒有用。最後，用了這種方法，沒有用setAttribute去設置類名，直接把類名寫在標籤上了
<script type="text/javascript">
document.getElementById("test").onclick=function(){
var span=document.createElement("span"),
icon=document.createElement("i");
span.innerHTML="<span id='color' class='title'>ie7 bug 測試</span>";
//span.setAttribute("class","color");
icon.innerHTML="<i class='icon'>yellow text</i>";
//icon.setAttribute("class","icon");
document.body.appendChild(span);
document.body.appendChild(icon);
}
</script>以上僅爲個人拙見，如果有更好的解決方案，請多多指教。如果有哪位大蝦能夠明白點的解釋下“改變display屬性可以觸發樣式重新應用”，麻煩告知一聲，謝謝~~~