firefox中tbody隐藏显示后td错位
用javascript动态的设置一个表格某些行的显示和隐藏，在IE中没有任何问题<table style="border-collapse: collapse;" bgcolor="#f1f1f1" border="1" bordercolor="#999999" cellpadding="0" cellspacing="0" width="95%"><tbody><tr><td><p style="line-height: 150%; margin: 5px;"><code><span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 255);">table</span><span style="color: rgb(0, 0, 204);">></span><br><span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 255);">tr</span><span style="color: rgb(0, 0, 204);">></span><span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 255);">td</span><span style="color: rgb(0, 0, 204);">></span>a1<span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 204);">/</span><span style="color: rgb(0, 0, 255);">td</span><span style="color: rgb(0, 0, 204);">></span><span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 255);">td</span><span style="color: rgb(0, 0, 204);">></span>b1<span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 204);">/</span><span style="color: rgb(0, 0, 255);">td</span><span style="color: rgb(0, 0, 204);">></span><span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 204);">/</span><span style="color: rgb(0, 0, 255);">tr</span><span style="color: rgb(0, 0, 204);">></span><br>
<span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 255);">tbody</span><span style="color: rgb(0, 0, 204);"> id="show"></span><br>
<span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 255);">tr</span><span style="color: rgb(0, 0, 204);">></span><span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 255);">td</span><span style="color: rgb(0, 0, 204);">></span>a2<span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 204);">/</span><span style="color: rgb(0, 0, 255);">td</span><span style="color: rgb(0, 0, 204);">></span><span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 255);">td</span><span style="color: rgb(0, 0, 204);">></span>b2<span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 204);">/</span><span style="color: rgb(0, 0, 255);">td</span><span style="color: rgb(0, 0, 204);">></span><span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 204);">/</span><span style="color: rgb(0, 0, 255);">tr</span><span style="color: rgb(0, 0, 204);">></span><br>
<span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 255);">tr</span><span style="color: rgb(0, 0, 204);">></span><span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 255);">td</span><span style="color: rgb(0, 0, 204);">></span>a3<span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 204);">/</span><span style="color: rgb(0, 0, 255);">td</span><span style="color: rgb(0, 0, 204);">></span><span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 255);">td</span><span style="color: rgb(0, 0, 204);">></span>b3<span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 204);">/</span><span style="color: rgb(0, 0, 255);">td</span><span style="color: rgb(0, 0, 204);">></span><span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 204);">/</span><span style="color: rgb(0, 0, 255);">tr</span><span style="color: rgb(0, 0, 204);">></span><br>
<span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 204);">/</span><span style="color: rgb(0, 0, 255);">tbody</span><span style="color: rgb(0, 0, 204);">></span><br>
<span style="color: rgb(0, 0, 204);"><</span><span style="color: rgb(0, 0, 204);">/</span><span style="color: rgb(0, 0, 255);">table</span><span style="color: rgb(0, 0, 204);">></span></span></code></p></td></tr></tbody></table><br><table style="border-collapse: collapse;" bgcolor="#f1f1f1" border="1" bordercolor="#999999" cellpadding="0" cellspacing="0" width="95%"><tbody><tr><td><p style="line-height: 150%; margin: 5px;"><code><span style="color: rgb(0, 0, 0);"><span style="color: rgb(255, 0, 0);">document</span><span style="color: rgb(0, 0, 204);">.</span><span style="color: rgb(255, 0, 0);">getElementById</span><span style="color: rgb(0, 0, 204);">(</span><span style="color: rgb(255, 0, 255);">"show"</span><span style="color: rgb(0, 0, 204);">)</span><span style="color: rgb(0, 0, 204);">.</span><span style="color: rgb(255, 0, 0);">style</span><span style="color: rgb(0, 0, 204);">.</span><span style="color: rgb(255, 0, 0);">display</span> <span style="color: rgb(0, 0, 204);">=</span> <span style="color: rgb(255, 0, 255);">"block"</span><span style="color: rgb(0, 0, 204);">;</span></span></code></p></td></tr></tbody></table><br>但是在firefox中，当onclick显示的时候后面两行会全缩到第一个td的位置，显示发生错位。<br><br><span style="font-weight: bold;">原因：</span><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Simsun; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><span class="Apple-style-span" style="font-family: 'courier new',courier; font-size: 14px; line-height: 21px; text-align: left;">当 table 的 display 为 block 时，不论是否在 HTML 里显式地写了 tbody 标签，Firefox 解析出的 tbody 都不再和 table 等宽，而是适应表格行的宽度。</span></span><br><br><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Simsun; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><span class="Apple-style-span" style="font-family: verdana,sans-serif; font-size: 14px; line-height: 21px; text-align: left;"><p style="padding: 0px; margin: 1em 0px 0.5em;"><span style="font-weight: bold;">解决：</span>恢复显示时设置 display 属性为空字符串即可。如：</p><div class="dp-highlighter nogutter" style="font-family: Consolas,'Courier New',Courier,mono,serif; font-size: 12px; background-color: rgb(231, 229, 220); width: 743px; overflow: auto; margin: 18px 0px ! important; padding-top: 1px;"><ol start="1" class="dp-c" style="margin: 0px 0px 1px ! important; padding: 0px; list-style-type: none ! important; border-style: none; background-color: rgb(255, 255, 255); color: rgb(92, 92, 92);"><li class="alt" style="margin: 0px ! important; padding: 0px 3px 0px 10px ! important; list-style-type: none ! important; border-style: none none none solid; border-width: 0px; background-color: rgb(255, 255, 255); color: inherit; line-height: 14px;"><p style="line-height: 150%; margin: 5px;"><code><span style="color: rgb(0, 0, 0);"><span style="color: rgb(255, 0, 0);">document</span><span style="color: rgb(0, 0, 204);">.</span><span style="color: rgb(255, 0, 0);">getElementById</span><span style="color: rgb(0, 0, 204);">(</span><span style="color: rgb(255, 0, 255);">"show"</span><span style="color: rgb(0, 0, 204);">)</span><span style="color: rgb(0, 0, 204);">.</span><span style="color: rgb(255, 0, 0);">style</span><span style="color: rgb(0, 0, 204);">.</span><span style="color: rgb(255, 0, 0);">display</span> <span style="color: rgb(0, 0, 204);">=</span> <span style="color: rgb(255, 0, 255);">""</span><span style="color: rgb(0, 0, 204);">;</span></span></code></p><span style="line-height: 18px; margin: 0px; padding: 0px; border-style: none; color: black; background-color: inherit;"><span style="line-height: 18px; margin: 0px; padding: 0px; border-style: none; color: black; background-color: inherit;"></span></span></li></ol></div><p style="padding: 0px; margin: 1em 0px 0.5em;">原理是通常设为空字符串时，此元素会恢复成其原来的 display 属性值，不用再人为区分 table 还是 block 了</p></span></span><br>
页:
[1]