[心得] css不同用法在IE與chrome上的顯示差異

看板Ajax作者laechan (揮淚斬馬雲)時間6年前 (2018/12/09 18:47)推噓1(1推 0噓 10→)

留言11則, 2人參與討論串1/1

其實只是想閒聊而已，另外不曉得以前有沒有人提過。假設以下 table: <table border=2> <tr><td>城市</td><td>區域</td><td>景點</td></tr> <tr><td>京都</td><td>二條</td><td>二條城，大政奉還的地點。</td></tr> <tr><td>京都</td><td>五條</td><td>清水寺，有著名的清水舞台。</td><tr> <tr><td>大阪</td><td>新世界</td><td>通天閣，大阪的地標。</td></tr> </table> 然後我在頁面寫了一個 filter 按鈕: function filter_data() { fstr=document.getElementById("filter").value; $("tr").each(function(){ tmp=$(this).text(); if(tmp.indexOf(fstr)>=0) $(this).css("display","block"); else $(this).css("display","none"); }); } 上面是很直覺的寫法，對每一行 tr 做 foreach，如果該行有關鍵字(fstr)就顯示，沒這個關鍵字就隱藏。我實測的結果，在 IE 上可以正常顯示，在 chrome 上面則會顯示錯誤的排版，表格會有對不齊的情況。後來把上面關鍵段改成底下就解決: if(tmp.indexOf(fstr)>=0) $(this).show(); else $(this).hide(); 再實測的結果，只對原本的 tr 每一列做 display=none，它在 chrome 是會正常顯示的: if(tmp.indexOf(fstr)>=0); else $(this).css("display","none"); 但只要有用到 $(this).css("display","block"); 排版就會不正常。所以有在懷疑是不是 show() 跟 css("display","block") 存在著潛在差異。 -- 『無窮的宇宙，無盡的時空，無限的可能，與無常的人生之間的永恆矛盾，從倪匡這顆腦袋中編織出來。』 ──金庸評倪匡 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 122.117.106.224 ※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1544352434.A.7EA.html

推

pkro12345

12/09 19:54, 6年前 , 1^F

12/09 19:54, 1^F

→

pkro12345

12/09 19:55, 6年前 , 2^F

12/09 19:55, 2^F

→

pkro12345

12/09 19:58, 6年前 , 3^F

12/09 19:58, 3^F