隐藏/取消隐藏会更改 Firefox 中的单元格大小
我试图在页面上隐藏/取消隐藏一些表格单元格，我发现在 Internet Explorer 中隐藏和取消隐藏之前和之后单元格的大小相同，但在 Firefox 和 Chrome 中，包含我的标签的单元格大小会发生变化。
我的页面实际上比以下代码更复杂，但我创建了这个精简版本来尝试隔离问题，因为它显示了问题而没有额外的复杂性。
我也尝试过 style="display: block;"和样式=“显示：内联；”取消隐藏元素。
谁能帮我理解为什么 Firefox 和 Chrome 会改变大小？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function hide_them(){
TD_hide_them();
}
function TD_hide_them(){
// hide the TD
count=0;
while(document.getElementById("TD_"+count)){
document.getElementById("TD_"+count).style.display="none";
count++;
}
// hide the Input
count=0;
while(document.getElementById("Input_"+count)){
document.getElementById("Input_"+count).style.display="none";
count++;
}
}
function unhide_them(){
TD_unhide_them();
}
function TD_unhide_them(){
// hide the TD
count=0;
while(document.getElementById("TD_"+count)){
document.getElementById("TD_"+count).style.display="inline";
count++;
}
// hide the Input
count=0;
while(document.getElementById("Input_"+count)){
document.getElementById("Input_"+count).style.display="inline";
count++;
}
}
</script>
<style type="text/css">
TD.MYLabel {
background-color: #99D6EB;
vertical-align: top;
text-align:left;
width: 100px;
}
</style>
</head>
<body>
<p>
<table style="width:600px; background-color: yellow;">
<tr>
<td id="TD_0" class="MYLabel">Label 0</td><td><input type="text" id="Input_0"></td>
</tr>
<tr>
<td id="TD_1" class="MYLabel">Label 1 is longer</td><td><input type="text" id="Input_1"></td>
</tr>
</table>
<input type="button" onclick="hide_them()" value="hide_them">
<input type="button" onclick="unhide_them()" value="unhide_them">
</p>
</body>
</html>
I am trying to hide/unhide some table cells o a page, and I find that the cells are the same size before and after hiding and unhiding in Internet Explorer, but in both Firefox and Chrome, the cells containing my labels change size.
My page is actually more complicated than the following code, but I created this stripped down version to try and isolate the problem, asi it shows the problem without additional complications.
I've also tried both style="display: block;" and style="display: inline;" to unhide the elements.
Can anyone help me to understand why Firefox and Chrome alter the size?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function hide_them(){
TD_hide_them();
}
function TD_hide_them(){
// hide the TD
count=0;
while(document.getElementById("TD_"+count)){
document.getElementById("TD_"+count).style.display="none";
count++;
}
// hide the Input
count=0;
while(document.getElementById("Input_"+count)){
document.getElementById("Input_"+count).style.display="none";
count++;
}
}
function unhide_them(){
TD_unhide_them();
}
function TD_unhide_them(){
// hide the TD
count=0;
while(document.getElementById("TD_"+count)){
document.getElementById("TD_"+count).style.display="inline";
count++;
}
// hide the Input
count=0;
while(document.getElementById("Input_"+count)){
document.getElementById("Input_"+count).style.display="inline";
count++;
}
}
</script>
<style type="text/css">
TD.MYLabel {
background-color: #99D6EB;
vertical-align: top;
text-align:left;
width: 100px;
}
</style>
</head>
<body>
<p>
<table style="width:600px; background-color: yellow;">
<tr>
<td id="TD_0" class="MYLabel">Label 0</td><td><input type="text" id="Input_0"></td>
</tr>
<tr>
<td id="TD_1" class="MYLabel">Label 1 is longer</td><td><input type="text" id="Input_1"></td>
</tr>
</table>
<input type="button" onclick="hide_them()" value="hide_them">
<input type="button" onclick="unhide_them()" value="unhide_them">
</p>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
不要假设“inline”是显示属性的默认值。事实并非如此。因此，如果您想删除“display: none;” override，只需将显示属性设置回原来的样子即可，这没什么。
Don't assume that "inline" is the default value of the display property. It isn't. So if you want to remove your "display: none;" override, simply set the display property back to what it was before, which is nothing.
我还注意到使用 inline 和 block 会弄乱 Firefox 中的大小，但在 IE 中不会
就我而言，我试图通过将样式应用于 TR 元素来隐藏整行。虽然它可以很好地隐藏它，但当取消隐藏时，它就被压扁了。
发现我需要使用：
insted of
或者
它然后正确地保持列大小，我猜这意味着如果您隐藏表格单元格，那么您应该使用
以便单元格的大小正确完成，显然是通过将其设置为其中之一另外两个选项 Firefox 和 Chrome 将不再将其视为其所在表格的一部分，而是将其视为恰好位于此处的单独项目，从而允许我们在表格中包含不属于该表格的元素桌子。但 IE 无法处理这个问题，表中的元素必须是表的一部分，因此它会将其重新附加到表中。我不确定该“功能”在什么情况下会很方便，而不仅仅是令人困惑。但这似乎就是正在发生的事情。
I also noticed that using inline, and block will mess up the sizes in Firefox, but not in IE
in my case I was trying to hide a whole row by applying the style to the TR element. and while it would hide it just fine it when un-hiding it was all squished.
found I needed to use:
insted of
or
it then kept the column sizes properly, I'm guessing that means if you hide a table cell then you should use
so that the cell's size is done properly, apparently by setting it to one of the other two options Firefox and Chrome will no longer treat it as part of the table it's in but treats it as if it was a separate item that just happens to be positioned there, allowing us to have elements in the table that aren't part of the table. But IE can't handle that, elements in the table have to be part of the table, so it reattaches it to the table. I'm not sure of a situation where that "feature" would be handy and not just confusing. but that seems to be what is going on.