Html Internet Explorer 中的表格行高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/727995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table row height in Internet Explorer
提问by Fritz H
I have the following table:
我有下表：
<table>
<tr>
<td style="height: 7px; width: 7px"> A1 </td>
<td style="height: 7px"> B1 </td>
<td style="height: 7px; width: 7px"> C1 </td>
</tr>
<tr>
<td style="width: 7px"> A2 </td>
<td> B2 </td>
<td style="width: 7px"> C2 </td>
</tr>
<tr>
<td style="height: 7px; width: 7px"> A3 </td>
<td style="height: 7px"> B3 </td>
<td style="height: 7px; width: 7px"> C3 </td>
</tr>
</table>
The basic idea is that the first row must be 7 pixels high. The left- and rightmost cells (A1 and C1) must be 7px wide, and the middle cell (B1) must scale according to the width of the table. The same goes for the bottom row (A3, B3, C3).
基本思想是第一行必须是 7 个像素高。最左边和最右边的单元格（A1 和 C1）的宽度必须为 7px，中间的单元格 (B1) 必须根据表格的宽度进行缩放。底行（A3、B3、C3）也是如此。
The middle row, however, needs to scale in height - in other words, it needs to be (tableheight - 14px). The left- and rightmost cells (A2, C2) need to be 7 pixels wide.
但是，中间行需要按高度缩放 - 换句话说，它需要为(tableheight - 14px). 最左侧和最右侧的单元格（A2、C2）需要为 7 像素宽。
An example:
一个例子：
7px x 7px
|------|-------------------------|------|
--- +------+-------------------------+------+
| | | | |
| 7px | | | |
| | | | |
--- +------+-------------------------+------+
| | | | |
| | | | |
| | | | |
| | | | |
| y | | | |
| | | | |
| | | | |
| | | | |
| | | | |
--- +------+-------------------------+------+
| | | | |
| 7px | | | |
| | | | |
--- +------+-------------------------+------+
HOWEVER: In Internet Explorer, the widths work fine (columns A and C are 7px, column B scales dynamically) - but the heights don't. Rows 1, 2 and 3 turn out to be exactly 33% of the height of the table, no matter what I do. Unfortunately I have to use this table, so replacing it with a set of DIVs is not an option.
但是：在 Internet Explorer 中，宽度工作正常（A 列和 C 列是 7px，B 列动态缩放）-但高度没有。无论我做什么，第 1、2 和 3 行都恰好是表格高度的 33%。不幸的是我必须使用这个表，所以用一组 DIV 替换它不是一个选项。
I have the following DOCTYPE:
我有以下 DOCTYPE：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I need to keep this, as some other elements on the page rely on some complex CSS-based layouts.
我需要保留这一点，因为页面上的其他一些元素依赖于一些复杂的基于 CSS 的布局。
Can anyone point me in the right direction to whip this into shape for IE?
任何人都可以指出我正确的方向来为 IE 打造这个形状吗？
EDIT: Should have mentioned earlier - this table is resized on the fly using javascript.
编辑：应该早先提到 - 此表使用 javascript 动态调整大小。
采纳答案by Chris Dale
Instead of using the height propertiy (since its causing problems) you can use a spacer. For exampel a transparent small gif which u set the height to the amount you want too. The gif you would just do like this: <img src="./gfx/spacer.gif" style="height:14px;" />
您可以使用垫片而不是使用高度属性（因为它会引起问题）。例如一个透明的小 gif，您也可以将高度设置为您想要的数量。你会这样做的gif：<img src="./gfx/spacer.gif" style="height:14px;" />
回答by Gineer
In the past I have found that the height attribute of cells are overridden by the font size inside the cell, even if there is not font present. Set the font size to something like 1 or 0 px and your heights will actually take effect.
过去我发现单元格的高度属性被单元格内的字体大小覆盖，即使没有字体存在。将字体大小设置为 1 或 0 像素，您的高度将实际生效。
回答by Gineer
Try this:
尝试这个：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
回答by user170422
What I do is declaring the outmost columns first with all the rows widths and heights, then I merge all rows in the middle column with rowspan.
我所做的是首先用所有行的宽度和高度声明最外面的列，然后我将中间列中的所有行与 rowspan 合并。
For the heights, in the middle column once merged, I just write <tr widthand no height, all browsers support no height I think. No need for GIFs. It has worked for me all the time.
对于高度，在合并后的中间列中，我只写了<tr width没有高度，我认为所有浏览器都支持无高度。不需要 GIF。它一直对我有用。
Hope this can help.
希望这能有所帮助。
回答by gmike
There is an IE9-Beta excessive row height issue that shows up in print-preview & printed copy too. For example, the row-height problem occurs when you attempt to print a 1px high line. To fix, I added <div style="font-size:0pt;">...</div>around the entire HTML code block.
在打印预览和打印副本中也出现了 IE9-Beta 过大的行高问题。例如，当您尝试打印 1px 高的行时，就会出现行高问题。为了解决这个问题，我在整个 HTML 代码块周围添加了<div style="font-size:0pt;">...。</div>
回答by Whistler Web Design
I just had a similar problem. I noticed in IE the widthproperty sometimes needs to be defined as a percentage to work with IE
我刚刚遇到了类似的问题。我注意到在 IE 中width有时需要将属性定义为百分比才能与 IE 一起使用
style="width: 25%"
then defined absolutely in the css for cross-browser continuity
然后在 css 中绝对定义以实现跨浏览器的连续性
.squares {
text-align: left;
margin: 0 auto;
height:250px; width:250px;
}
回答by bobince
this table is resized on the fly using javascript.
该表使用 javascript 动态调整大小。
Then how about also setting:
那么如何设置：
table.rows[1].style.height= (totalheight-14)+'px';
explicitly?
明确的？
The actual old-school correct answer for this is:
对此的实际老派正确答案是：
<tr height="7">...<tr>
<tr height="*">...<tr>
<tr height="7">...<tr>
Unfortunately, browsers never actually supported the HTML ‘*'/‘n*' syntax. You can say:
不幸的是，浏览器从未真正支持 HTML '*'/'n*' 语法。你可以说：
<tr style="height: 7px;">...</tr>
<tr style="height: 100%;">...</tr>
<tr style="height: 7px;">...</tr>
but IE takes this literally and makes the middle row 100% of the height of the whole table (which in turn makes the table taller than it should be). You coulduse this in conjuction with an IE hack to make the table's height 14px smaller on that browser, perhaps.
但是 IE 从字面上理解这一点，并使中间行占整个表格高度的 100%（这反过来又使表格比应有的高度更高）。您可以将它与 IE hack 结合使用，使该浏览器上的表格高度减小 14 像素。
回答by hendra ong
try this
尝试这个
<table>
<tr>
<td style="height: 7px; width: 7px"> A1 </td>
<td style="height: 7px"> B1 </td>
<td style="height: 7px; width: 7px"> C1 </td>
</tr>
<tr height="100%">
<td style="width: 7px"> A2 </td>
<td> B2 </td>
<td style="width: 7px"> C2 </td>
</tr>
<tr>
<td style="height: 7px; width: 7px"> A3 </td>
<td style="height: 7px"> B3 </td>
<td style="height: 7px; width: 7px"> C3 </td>
</tr>
</table>
回答by Somnath
Try this...Its working for me...
试试这个……它对我有用……
<td style="height:2px;font-size:2px;">
<img height="2px" alt="" src="images/transparent.gif" />
</td>
