IE6 реализует мин-ширину

Автор：Eve Cole Время обновления：2025-06-12 13:48:01

Прежде всего, мы знаем, что этот эффект должен быть старой темой.

При сортировке файлов сегодня я обнаружил, что некоторые из моих предыдущих решений для макетов долго лежали в папке. Давайте посмотрим на старые.

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

Меньше сплетен, добавьте исходный код:

Запустить и использовать странные функции IE6-Layout, CSS Реализация:

<стиль типа = текст/css>

.ie6-out {

_margin-left: 900px;

_zoom: 1;

}

.ie6-in {

_position: относительно;

_float: слева;

_margin-left: -900px;

}

#min-width {

Мин-ширина: 900px;

Фон: #CCC;

высота линии: 200px;

_zoom: 1;

}

</style>

В разделе <div id = min-width> IE6- контейнер реализует моделирование эффекта мин ширины. Пожалуйста, измените размер окна браузера по желанию, а затем нажмите кнопку, чтобы просмотреть ширину. </div>

</div>

Демонстрация реализации CSS:

Запустите кодовое поле

<html xmlns = http: //www.w3.org/1999/xhtml> <Head> <meta http-eviv = content-type content = text/html; charset = gb2312/> <title> CSS достигает минимальной ширины </title> <style type = text/css> body { Text-Align: Center;}. IE6-OUT {_margin-left: 900px; _zoom: 1;}. Ie6-in {_position: относительно; _float: слева; _margin-le ft: -900px;}#min-width {min-width: 900px; фон: #ccc; line-hight: 200px; _zoom: 1;} </style> </head> <body> <div class = ie6-out> <div class = ie6-in> <div id = min-width> IE6-, контейнер реализует моделирование эффекта мин ширины. Пожалуйста, измените размер окна браузера по желанию, а затем нажмите кнопку, чтобы просмотреть ширину. </div> </div> </div> <input name = type = кнопка onclick = alert ('width контейнер =' document.getElementById ('min-width'). clientWidth 'px' '/n/n' 'width width =' (document.documentelement.clientwidth || document.body.colientwidth) 'px'); value = width/> </body> </html>

[CTRL A Всего выбора Советы: сначала вы можете изменить какой -то код, а затем нажмите запуск]

Расширенная демонстрация:

Запустите кодовое поле

<html xmlns = http: //www.w3.org/1999/xhtml> <Head> <meta http-eviv = content-type content = text/html; charset = gb2312/> <title> CSS достигает минимальной ширины </title> <style type = text/css> body { Text-Align: Center;}. IE6-OUT {_margin-left: 900px; _zoom: 1;}. Ie6-in {_position: относительно; _float: _margin-left: -900p x; фон:#f00; Line-Height: 200px;}#min-width {min-width: 900px; фон: #ccc; _zoom: 1;} </style> </head> <body> <div class = ie6-out> <div class = ie6-in> aa </div> </div> <div class = ie6-out> <div class = ie6-in> aa <div в соответствии с id = min-width> ie6-, контейнер реализует моделирование эффекта ширины min. Пожалуйста, измените размер окна браузера по желанию, а затем нажмите кнопку, чтобы просмотреть ширину. </div> </div> </div> <input name = type = кнопка onclick = alert ('width контейнер =' document.getElementById ('min-width'). clientWidth 'px' '/n/n' 'width width =' (document.documentelement.clientwidth || document.body.colientwidth) 'px'); value = width/> </body> </html>

[CTRL A Всего выбора Советы: сначала вы можете изменить какой -то код, а затем нажмите запуск]

Выражение CSS

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

Есть два момента, которые здесь нужно указать:

1. Элементы, представляющие просмотр в IE6-, различаются в стандартном режиме и режиме причуда. Первое - <html>, а последний - <body>;

2. IE6-in вышеупомянутых двух разных режимов, это разные проявления, когда контент переполняется, что приводит к мертвому циклу в судебном решении. Это немного многословно объяснить, давайте сами практиковать это.

Выражение CSS реализует исходный код минимальной ширины: <стиль типа = текст/CSS>

Body {text-align: center;}

#min-width {

Мин-ширина: 900px;

_width: Expression ((document.documentelement.clientwidth || document.body.clientwidth) <900? 900px :);

высота линии: 200px;

Фон: #CCC;

}

</style>

Демонстрация:

Запустите кодовое поле

<! 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> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> CSS выражение достигает минимальной ширины </title> <стиль типа = текст/css> body { Text-align: center;}#min-width {min-width: 900px; _width: Expression ((document.documentelement.clientwidth || document.body.clientwidth) <900? 900px :); строка-высота: 200px; фон: #ccc; _zoom: /* Триггер. */} </style> </head> <body> <div id = min-width> IE6-, контейнер реализует эффект мин-ширины. Пожалуйста, измените размер окна браузера по желанию, а затем нажмите кнопку, чтобы просмотреть ширину. </div> <input name = type = кнопка onclick = alert ('width =' document.getElementbyId ('min-width'). clientWidth 'px' '/n/n' 'width with =' (document.documentelement.clientwidth || document.clientwidth) 'px'); value = width/> </body> </html>

[CTRL A Всего выбора Советы: сначала вы можете изменить какой -то код, а затем нажмите запуск]

Вышеуказанные два решения могут быть реализованы как в режиме IE6-стандарта, так и в режиме Quirk. IE Expression не обнаружила проблем с эффективностью процессора в этом приложении.