Ошибка Internet Explorer 8 ширины ячейки таблицы с colspan установлена
У меня есть следующая страница 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?
4 ответа
Вот мой результат для неудачной ширины td в IE8:
<table style="width: 100%;" border="1">
<tr>
<td style="width:auto;">td1</td>
<td style="width:15px;">td2</td>
<td style="width:20px;">td3</td>
</tr>
<tr>
<td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
</tr>
</table>
<!-- IE8 HACK 100% WIDTH -->
<table style="width: 100%;" border="1">
<tr>
<td style="width:100%;">td1</td>
<td style="width:15px;">td2</td>
<td style="width:20px;">td3</td>
</tr>
<tr>
<td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
</tr>
</table>
Если вы установите ширину первого td (тот, что с colspan="2") равной 100px, вы получите желаемое поведение, по крайней мере, для этого тестового случая.
Насколько я могу судить, поведение IE8 корректно согласно спецификации CSS 2.1 здесь: http://www.w3.org/TR/CSS2/tables.html#width-layout раздел 17.5.2.2 Автоматическое размещение таблиц. Шаг 3 выглядит подозрительно.
Однако, возможно, это ошибка спецификации, так как все выглядит очень расплывчато в отношении многих деталей. Алгоритм в CSS 3 выглядит гораздо более тщательно прописанным.
EDIT: Это также работает с вашим вторым тестовым примером.
Поскольку вам известен размер таблицы (700), вы можете обойти ошибку, установив ширину обеих ячеек во второй строке. Когда вторая ячейка установлена на 600 пикселей, таблица ведет себя.
Но это все равно отстой.
Редактировать - вот еще один отстойный обходной путь - добавьте пустое изображение в первую ячейку, чтобы задать размер, затем добавьте ширину 100% к ячейке xsecond:
<tr>
<td style="width: 100px; border: solid 1px purple;" >x<img src="\images\blank.gif" width="100" height="1" /></td>
<td style="border: solid 1px blue;width:100%;">Some sample text</td>
</tr>
Хорошо, это чистое безумие. Ответ Рэя работал для первоначального теста, но не для моего реального примера, что привело меня к созданию второго тестового примера с исправлением Рэя:
<?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>
По какой-то причине наличие входных элементов в первой ячейке таблицы делает решение Рэя не совсем точным. работай.
Решение, которое закончилось реальным случаем, который мы пытались исправить, требовало добавления к таблицам «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 ??? ДЕЙСТВИТЕЛЬНО?