IE6 и min-width
Проблема в том, что в ie ширина блока не тянется до ширины окна после ресайза.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
html,body {
margin:0;
padding:0;
height:100%;
width:100%;
}
#pad {
height:100%;
/* width:expression(document.getElementById('pad').offsetWidth<685?'680px':'auto'); */
/* width:expression(document.getElementById('pad').offsetWidth<685?'680px':'100%'); */
/* width:expression(document.getElementById('pad').offsetWidth<685?'680px':document.documentElement.clientWidth+'px'); */
width:expression(document.getElementById('pad').offsetWidth<685?'680px':'1000px');
border:1px solid red;
}
</style>
</head>
<body>
<div id="pad">xxx</div>
</body>
</html>
Теперь уменьшаем окно ie6 меньше min-width, затем снова его разворачиваем на весь экран и видим, что див не растянулся. Такое наблюдается при auto, 100% и document.documentElement.clientWidth. Если же я вручную ставлю 1000px, то всё работает. Но я не могу заранее знать ширину. |
body становится такой же ширины, как и #pad.
попробуйте плясать от documentElement.offsetWidth А можно вставить в начало #pad див шириной 680px высотой 0 и overflow: hidden, и он будет распоркой, не позволяющей диву быть ýже. |
Самое интересное, что document.documentElement.clientWidth всегда показывает верные данные и при ресайзе окна на весь экран выдаётся тысяча с небольшим пикселей, но в стиль width эта тысяча просто не присваивается. Проверял алертом в head перед style.
Если с помощью css решить неудасться, то видимо придётся переделывать саму страницу, вставлять див и т.д. |
DMH,
ну… это IE6. меня обычно спасает body {
width: expression((document.body.parentNode.offsetWidth < 1000)?"1000px":"auto");
|
Пробовал с document.documentElement.offsetWidth.
<script>
window.onresize=function() {
alert(document.documentElement.offsetWidth); // при развёртывании окна - 1024, всё как надо
}
</script>
<style>
html,body {
margin:0;
padding:0;
height:100%;
width:100%;
}
#pad {
height:100%;
border:1px solid red;
width:expression(document.getElementById('pad').offsetWidth<685?'680px':document.documentElement.offsetWidth+'px'); // а тут эти самые 1024px не присваиваются
}
</style>
|
body {
width: expression((document.body.parentNode.offsetWidth < 1000)?"1000px":"auto");
}
Оно самое. При выставлении этого expression для body, остальные expression тоже заработали. Не понял лишь одного. Почему если вручную выставить 1000px для pad, то он растянется, а если через getElementById('pad').offsetWidth, который судя по алерту больше 1000px, то нет. Хотя ie6 непредсказуем. |
Дело в том, что для того, чтобы определить новую ширину, приходится считать старую. А старая равна значению, установленному при предыдущем запуске функции пересчета.
Т.е., по-хорошему, нужно сделать примерно так:
Но тут есть одно но: для того, чтобы посчитать clientWidth, нужно сделать reflow, а для этого нужно значение самого expression, и ie6 вываливается в бесконечную рекурсию, а после этого очень скоро падает. :/ |
Решил уже не тратить время на эксперименты. Задал document.body.parentNode.offsetWidth для body, остальные элементы пускай сами растягиваются/сжимаются вслед за body.
Насчёт бесконечной рекурсии - width:expression(document.getElementById('pad').of fsetWidth<680?'680px':'auto'); От этой строчки ie6 входит в рекурсию и виснет. Оказывается нужно, чтобы второй параметр был меньше первого, например 681?'680px', тогда работает. С document.body.parentNode.offsetWidth такого не наблюдается. |
| Часовой пояс GMT +3, время: 03:49. |