ширина ячейки таблицы в IE7 не изменится, если содержимое выбранного элемента будет изменено с помощью JavaScript - PullRequest
Новая
       8

ширина ячейки таблицы в IE7 не изменится, если содержимое выбранного элемента будет изменено с помощью JavaScript

0 голосов
/ 06 августа 2009

У меня есть таблица на моем веб-сайте с элементом select в одной из ячеек. Если я пытаюсь изменить содержимое элемента, все работает нормально в большинстве браузеров, которые я пробовал (в том числе IE6, что удивительно), но в IE7 ячейка таблицы не регулирует свою ширину в соответствии с элементом select. Можно ли как-нибудь изменить размер ячейки таблицы?

Вы можете сами увидеть проблему с помощью этого простого теста: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Table cell width test</title>
</head>
<body>
<table>
    <tr>
        <td style="border: solid black 1px">
            <select id="test">
            </select>
        </td>
    </tr>
</table>
<script type="text/javascript">
window.onload = function() {
    var option = document.createElement("option");
    option.innerHTML = "asdfasdfasdfasdfasdfasdfasdfasdf";
    document.getElementById("test").appendChild(option);
};
</script>
</body></html>

Ответы [ 2 ]

1 голос
/ 06 августа 2009

Похоже, вы также можете изменить отображение на none и затем обратно на встроенное, одно за другим, и это устранит проблему, похоже, тоже не вызывает мерцания. 

jQuery.fn.ie7fix = function(){
    if (!($.browser.msie && $.browser.version == "7.0")) return $(this);
    return $(this).hide().show();
};
$('#test').append('<option>asdfasdfasdfasdfasdfasdfasdfasdf</option>').ie7fix();
1 голос
/ 06 августа 2009

Да, это дерьмовая проблема IE, называемая hasLayout. Чтобы понять проблему, это отличная статья: http://www.satzansatz.de/cssd/onhavinglayout.html

Чтобы решить вашу проблему, вам просто нужно заставить ячейку и ее содержимое пересчитать ее макет. Простой способ сделать это - просто добавить и удалить пустой div: 

<script type="text/javascript">
window.onload = function() {
    var test = document.getElementById('test');
    var option = document.createElement("option");
    option.innerHTML = "asdfasdfasdfasdfasdfasdfasdfasdf";
    test.appendChild(option)

    var div = document.createElement("div");
    test.parentNode.appendChild(div);
    test.parentNode.removeChild(div);
}
</script>

Дерьмо ... но это работает.

Приветствия

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...