Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / max-width в IE6 / 5 сообщений из 5, страница 1 из 1
27.05.2008, 22:22
    #35338774
Logo
Logo
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
max-width в IE6
Часто при верстке возникают задачи сделать дизайн резиновым, но в определенных пределах, например, с шириной от 1024 до 1600. Для этого подходят CSS свойства max-width и min-width, но IE 6 их не поддерживает. В различных статьях для решения этой проблемы советуют использовать JavaScript, через expression или обычным скриптом. Мой способ имитации min-width и max-width позволит обойтись без скрипта. Основан он на том что умеет IE вычислять максимальную ширину ячейки таблицы.
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=windows-1251"> 
<style>
html, body {padding:0; margin:0;}

#iebug {border-collapse:collapse;}
#iebug td {padding:0;}
#iebug .td1 {
  position:relative;
}
#content {
  position:absolute;  
  width:100%;
}
.max_width {float:left;}

.max_width {width:800px}
.min_width {width:600px}

#content {
  background:#faa;
  height:700px;
}
</style>
</head>
<body>
<table id="iebug">
  <tr><td class="td1">
     <div id="content">

     </div>
  <tr><td class="td2">
     <div  class="min_width"></div>
     <span class="max_width"></span>    
</table>
</body>
</html>

Этот код использует еще один баг IE- перемещаемые элементы(float) не влияют корректно на минимальную ширину ячейки, хотя влияют на максимальную.
Добавляем условные комментарии для понимания IE7 и другими браузерами, и вауля - кроссбраузерный валидный код.

Код выше хорошо подходит для ограничения размера документа, но не всегда применим, если требуется сделать маленький min-width, меньше приблизительно 10px.
В этом случае в IE происходят удивительные вещи- ширина блока зависит от скорости, с которой юзер меняет размер окна. Для корректной работы потребуются дополнительные изощрения, к примеру:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=windows-1251"> 
<style>
html, body {padding:0; margin:0;}

#iebug {border-collapse:collapse;margin-left:-10px}
#iebug td {padding:0;}
#iebug .td1 {position:relative;}
#content {
  margin-left:10px;
}
#bef_content {
  position:absolute;  
  width:100%;
}
.max_width {float:left;}
.ogran {width:10px;}

.max_width {width:110px}

#iebug {background:#ddf;}
#parent {border:5px solid #dd0;margin-left:250px;border-collapse:collapse;}
#parent td {padding:0}
#content {background:#00f;height:100px}
</style>
</head>
<body>
<table id="parent">
<tr><td>

<table id="iebug">
  <tr><td class="td1">
     <div id="bef_content">
       <div id="content">
       </div>
     </div>
  <tr><td class="td2">
     <div  class="ogran"></div>
     <span class="max_width"></span>    
</table>

</table>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Период между сообщениями больше года.
04.07.2009, 18:42
    #36073520
p.sorokin
p.sorokin
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
max-width в IE6
ВУАЛЯ не работает. поправте ссылку.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.07.2009, 19:39
    #36073541
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
max-width в IE6
Ссылка может помочь с багами ИЕ6
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.07.2009, 23:31
    #36073620
p.sorokin
p.sorokin
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
max-width в IE6
IDVsbruck,
ссылка хорошая, на про max-width в IE6 там ничего нет
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.07.2009, 11:23
    #36073723
Logo
Logo
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
max-width в IE6
Того сайта уж нет давно, и домен перехватили. Высылаю пример на почту.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / max-width в IE6 / 5 сообщений из 5, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 561ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1454562]:
 0ms
get settings:
 10ms
get forum list:
 16ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 211ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 53ms
get tp. blocked users:
 2ms
others: 246ms
total:  561ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]