Как сделать так, чтобы дочерние элементы контейнера соответствовали ширине самого большого дочернего элемента в IE7? - PullRequest
Новая
       0

Как сделать так, чтобы дочерние элементы контейнера соответствовали ширине самого большого дочернего элемента в IE7?

3 голосов
/ 03 марта 2011

Похоже, это должен быть дубликат - я нашел много похожих вопросов - но ни один не дал мне ответа, который работал. Если я пропустил один, укажите мне, и я удалю этот.

У меня есть абсолютно позиционный элемент div, содержащий несколько дочерних элементов div. Я хочу, чтобы контейнер расширялся до ширины самого широкого дочернего элемента, а все остальные дочерние элементы - до той же ширины. Контейнер должен иметь минимальную ширину и максимальную высоту; если детей слишком много, следует прокрутить.

Так что это похоже на поведение выпадающего списка, хотя это используется в другом контексте.

Решение, которое я придумал, работает на Chrome, Firefox и IE8, но не на IE7 (стандартном режиме), где дочерние элементы не расширяются до ширины контейнера. Я перепробовал ряд изменений, некоторые из которых заставили детей расширяться, но все это привело к дополнительным проблемам. Как правильно это сделать?

Я создал следующий пример, чтобы проиллюстрировать проблему: 

<html>
<head>
<style>

.container {
    display: block;
    position: absolute;
    top: 50px;
    left: 50px;
    min-width: 100px;
    max-height: 100px;
    border: 1px solid #999;
    overflow-x: hidden;
    overflow-y: auto;
}

.entry {
    display: block;
    width: auto;
    height: 20px;
    padding: 3px 20px 3px 5px;
    white-space: nowrap;
    background: #eee;
}

</style>
</head>
<body>
    <div class='container'>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRSTUVW</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRST</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQ</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRST</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRSTUVW</div>
    </div>
</body>

Ответы [ 2 ]

2 голосов
/ 03 марта 2011

В IE7 родительскому div требуется определенная ширина для width:100% или width:auto для правильной работы над дочерними элементами.К сожалению для вас, определение ширины для родительского элемента является контрпродуктивным, так как вы хотите, чтобы размер родительского элемента был динамическим по отношению к самому большому дочернему элементу, а не статичным.

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

ВотJavaScript, который я использовал: 

$(function() {
    /* function finds largest width of the .entry child of .container
    and assigns that width to the parent .container.
    This is for IE7 bug that requires a defined parent width in order for 
    width:auto to work on the children elements
    */
    var elemWidth = 0;
    var maxWidth = 0;
    $('.container')
        .find('.entry')
        .each(function() {
            // iterate through .entry and assign largest width to var elemWidth
            if ( $(this).width() > elemWidth ) {
            elemWidth = $(this).width();
            }
         });
    maxWidth = elemWidth + 30; // extra 30px spacing to compensate for y-overflow
    $('.container').width(maxWidth);
});

А вот рабочий пример jsfiddle: http://jsfiddle.net/qG8Qf/1/

0 голосов
/ 03 марта 2011

Это должно работать ... 

$(function() {
    var maxWidth = 0;
    $('.container')
        .find('div')
        .each(function() { maxWidth = Math.max($(this).width(), maxWidth) })
        .each(function() { $(this).width(maxWidth) })
        .width(maxWidth);
});

РЕДАКТИРОВАТЬ: похоже, не работает в IE7 в конце концов. Может быть, у кого-то есть исправление?

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

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

...