VPF::min-width IE - Форум программистов

Рыжий

Дата 31.10.2008, 19:13 (ссылка)

(нет голосов)

Загрузка ...

Помешанный

Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: 1
Всего: 20

Пытаюсь сделать min-width в Internet Explorer (версия IE 6.0.2900)
Имеем:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            #root{
                background-color:#c0c0c0;
                border:1px solid #000000;
                min-width: 300px;
                float:left;
                padding:25px;
            }
        </style>   
    </head>
  <body>
        <div id="root">
                Lorem ipsum dolor sit amet
        </div>
  </body>
</html>

Это обычный div с min-width = 300px.
Firefox ведет себя отлично - если фраза маленькая - ширина равна 300px, если фраза большая - расширяет div.
IE: если фраза большая - расширяет div но если она маленькая - сужает его (становится меньше чем 300px)

Нашел вот такой сайт: http://cssing.org.ua/2005/09/02/min-width-for-ie/ Там есть 3 варианта:

1. Первый вариант - это использование expression:

Цитата

width:expression(document.body.clientWidth < 300 ? "300px": "auto" );

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

Цитата

Чтобы помочь обеспечению безопасности, Internet Explorer ограничил отображение активного содержимого, могущего получить доступ к компьютеру, этим файлом.

2. Второй метод работает, но он создает border, что не есть гуд. А если я хочу разместить текст посередине - на border он не вылезет (((

3. А вот третий способ, странно, но у меня не сработал smile

Вопрос остается открытым, как заставить Internet Explorer понимать min-width?? Кто какие хаки знает?

SelenIT

Дата 31.10.2008, 19:34 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Цитата(Рыжий @ 31.10.2008, 19:13

)

IE прежде чем выполнить этот код спрашивает у юзера разрешение

Это только если открывать страницу как локальный файл. По http - молча выполняет (если JS не выключен, разумеется).

Цитата(Рыжий @ 31.10.2008, 19:13

)

если я хочу разместить текст посередине - на border он не вылезет (((

Можно выкрутиться через отрицательный margin. Или, на крайний случай, position: relative/absolute...

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

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

ksnk

Дата 31.10.2008, 20:52 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Код


...
                min-width: 300px;
...
        <div id="root">
                <div style="width:300px; height:1px; overflow:hidden;"></div>
                Lorem ipsum dolor sit amet
        </div>
 ...

Вот еще вариант min-width для IE. Достаточно коряво, но, imho, прямее всяких expression и ie-хаков.

P.S. Это, вообще-то второй способ по статье, правда без дополнительных ненужных наворотов smile

Единственный минус - нужно помнить, что пиксель сверху уже занят...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

webster

Дата 31.10.2008, 20:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Можно использовать "распорку":

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            #root{
                background-color:#c0c0c0;
                border:1px solid #000000;
                min-width: 300px;
                float:left;
                padding:25px;
            }
            #root .bottom_fix{
            display: block;
            font-size: 1px;
            line-height: 0px;
            height: 1px;
            margin-bottom: -1px;
            min-width: 300px;
            width: auto!important;
            width: 300px;            
            }
        </style>   
    </head>
  <body>
        <div id="root">
                Lorem ipsum dolor
        <span class="bottom_fix"></span>
        </div>
  </body>
</html>

Рыжий

Дата 31.10.2008, 21:34 (ссылка)

(нет голосов)

Загрузка ...

Помешанный

Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: 1
Всего: 20

Ого! То, что надо!!!

KonstRuctor

Дата 5.11.2008, 00:00 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 245
Регистрация: 31.3.2006
Где: Россия, Санкт-Пет ербург

Репутация: нет
Всего: нет

Я перепробовал несколько вариантов.
Все же остановился на width:expression.

Посмотри такой вариант решения проблемы:
АМ фрейворк

Мне он показался очень интересным.

zjeka

Дата 16.11.2008, 00:31 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 15.8.2008
Где: Ukraine

Репутация: нет
Всего: нет

Так же пользую распорку, пока никто не жаловался

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »