gpt4 book ai didi

html - 带有 colspan 集的 Internet Explorer 8 表格单元格宽度错误

转载 作者:技术小花猫 更新时间:2023-10-29 11:37:17 26 4
gpt4 key购买 nike

我有以下 html 页面:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>A title</title>
</head>
<body>
<table style="width: 700px; border: solid 1px green">
<tr>
<td style="border: solid 1px red;" colspan="2">A cell with a bunch of text. The amount of text here increases the 'x' cell.<td>
</tr>
<tr>
<td style="width: 100px; border: solid 1px purple;" >x</td>
<td style="border: solid 1px blue;">Some sample text</td>
</tr>
</table>
</body>
</html>

在除 Internet Explorer (8) 以外的所有浏览器中,内容为“x”的单元格的宽度为 100 像素,并且它的相邻单元格会填满表格的其余部分。在 Internet Explorer 8 中,它要大很多,并且它的大小会根据设置了 colspan="2"的单元格中的文本量而变化。 IE 中的这个错误是否有修复?

最佳答案

好吧,这纯粹是精神错乱。 Ray 的回答适用于初始测试,但不适用于我的真实示例,这促使我使用 Ray 的修复创建了第二个测试用例:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>title</title>
</head>
<body>

<form>

<table style="width: 700px;">
<tr>
<td colspan="2">Here is some really long text. For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why. Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
</tr>
<tr>
<td style="width:100px; background: green;"><input type="checkbox" value="1" /></td>
<td style="width:600px;">blah</td>
</tr>
</table>

<table style="width: 700px;" border="0">
<tr>
<td colspan="2">Some short text</td>
</tr>
<tr>
<td style="width: 100px; background: red;"><input type="checkbox" value="1" /></td>
<td style="width: 600px;">blah</td>
</tr>
</table>

</form>

</body>
</html>

出于某种原因,将输入元素放在第一个表格单元格中会使 Ray 的解决方案不太可行。

最终确实解决了我们试图修复的真实案例的解决方案需要将“table-layout:fixed”添加到表格中,并使表格中的第一行具有设置了宽度的空单元格。这是前面示例的修改版本,其中包含我刚刚描述的修复:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>title</title>
</head>
<body>

<form>

<table style="table-layout: fixed; width: 700px;">
<tr>
<td style="width: 100px;"></td>
<td style="width: 600px;"></td>
</tr>
<tr>
<td colspan="2">Here is some really long text. For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why. Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
</tr>
<tr>
<td style="background: green;"><input type="checkbox" value="1" /></td>
<td>blah</td>
</tr>
</table>

<table style="width: 700px; table-layout: fixed;" border="0">
<tr>
<td style="width: 100px;"></td>
<td style="width: 600px;"></td>
</tr>
<tr>
<td colspan="2">Some short text</td>
</tr>
<tr>
<td style="background: red;"><input type="checkbox" value="1" /></td>
<td>blah</td>
</tr>
</table>

</form>

</body>
</html>

真的是 Internet Explorer???真的吗?

关于html - 带有 colspan 集的 Internet Explorer 8 表格单元格宽度错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2412692/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com