Почему атрибут min-width CSS не заставляет div иметь заданную минимальную ширину?

<html>
    <head>
        <style type="text/css">
            div {
                border:1px solid #000;
                min-width: 50%;
            }
        </style>
    </head>
    <body>
        <div>This is some text. </div>
    </body>
</html>

Я считаю, что div должен составлять 50 процентов страницы, если по какой-то причине текст внутри div не делает его больше. Однако граница вокруг div растягивается по всей ширине страницы. Это происходит как в IE, так и в Firefox.

Предложения?

Ответы

Ответ 1

Если вы обеспечиваете позиционирование absolute элементу, оно будет 50% в Firefox. Однако IE не любит атрибуты min-width или min-height, поэтому вам нужно будет определить ширину как 50%, а также для работы в IE.

Ответ 2

Я считаю, что div должен составлять 50 процентов страницы, если по какой-то причине текст внутри div больше не будет.

min-width не устанавливает минимальную начальную ширину, из которой будет расти ваш блок; скорее это ограничивает, насколько далеко блок может сокращаться.

В min-width: 50%;, 50% относится к содержащему блоку. Я никогда не использовал проценты с min-width, но я считаю, что это может быть полезно с другими единицами. Например, если у меня есть блок (например, столбец текста), который я хочу быть полной шириной, но я никогда не хочу, чтобы он опустился ниже минимальной ширины, я мог бы использовать что-то вроде {width: 100%; min-width: 250px;}.

Обратите внимание на предостережения в поддержке IE, упомянутые другими.

Ответ 3

Без min-width, ваш div будет занимать всю ширину страницы, как это делают элементы display:block. Добавление min-width не может сделать его меньше.

Изменение свойства display на свойство absolute или float на left приведет к сжатию элемента в соответствии с содержимым. Затем min-width начинает иметь смысл.

Ответ 4

Чтобы добавить к чему сказал Крис Серра, в IE < 7 (и в 7? Я не могу отслеживать эти дни, но определенно < 8), width ведет себя точно так же, как min-width должен вести себя.

Ответ 5

Вы говорите, что минимальная ширина составляет 50%. Поскольку нет ничего, что занимало бы пространство, оно принимает все это (кроме полей).

Если вы даете ему максимальную ширину, скажем, 75%, firefox должен ограничивать это. IE6 все равно игнорирует его.

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

Ответ 6

Возможно, вы захотите попробовать личный стиль IE и включить его и выражение, например:

print("width:expression(document.body.clientWidth < 1024? "50%" : "100%");");

Это изменит настройку ширины в зависимости от ширины окна браузера во время загрузки. Мне лично нравится использовать px в качестве единицы измерения, но вам нужно попробовать его с вашей конкретной настройкой.