作者laechan (挥泪斩马云)
看板Ajax
标题[心得] css不同用法在IE与chrome上的显示差异
时间Sun Dec 9 18:47:07 2018
其实只是想闲聊而已，另外不晓得以前有没有人提过。
假设以下 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://webptt.com/cn.aspx?n=bbs/Ajax/M.1544352434.A.7EA.html
1F：推 pkro12345: 那是因为display在表格中预设是table-row不是block， 12/09 19:54
2F：→ pkro12345: 如果你把block改成table-row应该就没事了，另外那逻辑 12/09 19:55
3F：→ pkro12345: 有filter的不用理他，没有的再设定css隐藏就好。 12/09 19:58
4F：→ pkro12345: 补充一下<tr>预设是table-row，<td>是table-cell之类的 12/09 19:59
5F：→ laechan: 因为我最初设计是让使用者可变更关键字後再按一次搜寻 12/09 20:01
6F：→ laechan: 若用原本的写法第一次搜寻後会成功,更改关键字後再搜就会 12/09 20:01
7F：→ laechan: 排版失败,然後还去找如何只refresh表格的方法也都失败哈 12/09 20:01
8F：→ laechan: 感谢,原来有table-row跟table-cell之类的属性.. 12/09 20:02
9F：→ pkro12345: 你可以试试看将没有fliter的元素添加一个class里面为 12/09 20:04
10F：→ pkro12345: display:none;，之後每次重新搜寻先把全部的class清掉 12/09 20:05
11F：→ pkro12345: 再添加没有filter的元素class一次。 12/09 20:06
目前在思考如何在每一个 <tr>...</tr> 里头自动加一个 td，
用来显示序号。大抵上可能仍是使用 $("tr").each 来处理。
※ 编辑: laechan (122.117.106.224), 12/10/2018 23:32:26