ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как IE рассчитывает offsetWidth/offsetHeight?
13 сообщений из 13, страница 1 из 1
Как IE рассчитывает offsetWidth/offsetHeight?
    #36523097
Пономарёв
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пономарёв
Участник
В общем такая ерунда: есть скрипт, который показывает модальное окошко. Скрипту можно явно указать размеры width и height или оставить 0 и 0, и тогда он рассчитывает размеры исходя из содержимого.
Вырезка:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
function(c,w,h){
	if(!w||!h){
		var x=p.style.width, y=p.style.height;
		(typeof c == 'object') ? b.appendChild(c) : b.innerHTML=c;
		p.style.width=w?w+'px':''; p.style.height=h?h+'px':'';
		b.style.display='';
		w=parseInt(b.offsetWidth); h=parseInt(b.offsetHeight- 12 ); // - 12  для нормализации высоты
		b.style.display='none'; p.style.width=x; p.style.height=y;
	}else{
		(typeof c == 'object') ? b.appendChild(c) : b.innerHTML=c;
	}

Так вот… В ИЕ (даже ИЕ8), если запустить на локальной машине b.offsetWidth и b.offsetHeight рассчитываются правильно (например 300 и 190), а если запускать по сети — неправильно (660 и 210).

В объекте b есть просто DIV, внутри него DIV с «float: right» и DIV с «clear: right».

И вот если убрать этот DIV вообще из объекта b или убрать свойство «float: right», то тогда ИЕ считает b.offsetWidth нормально и локально и через сеть…

Объясните мне кто-нибудь — почему? Или хотя бы как ИЕ считает offsetWidth.
...
Рейтинг: 0 / 0
16.03.2010, 12:53:26
| Ответить | Цитировать | Написать  
Как IE рассчитывает offsetWidth/offsetHeight?
    #36523205
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Пономарёвесть скрипт, который показывает модальное окошко
Здаётся мне оно не модальное... И даже не окно вовсе...
...
Рейтинг: 0 / 0
16.03.2010, 13:15:27
| Ответить | Цитировать | Написать  
Как IE рассчитывает offsetWidth/offsetHeight?
    #36523630
Пономарёв
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пономарёв
Участник
Ну это я образно, конечно. Оно «псевдомодальное» — скрипт создает и показывает DIV и убирается он только по нажатию кнопочки «Готово». Извините, ошибся в выражении.
...
Рейтинг: 0 / 0
16.03.2010, 15:00:26
| Ответить | Цитировать | Написать  
Как IE рассчитывает offsetWidth/offsetHeight?
    #36523658
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Пономарёв , может его сверстать как-то так, чтобы не вычислять его размеры? Пусть сам их и делает...
...
Рейтинг: 0 / 0
16.03.2010, 15:08:02
| Ответить | Цитировать | Написать  
Как IE рассчитывает offsetWidth/offsetHeight?
    #36523662
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Тестовый примерчик с этим ДИВом покажи. Так чтобы он сразу в разметке присутствовал, а не создавался скриптом...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
16.03.2010, 15:09:57
| Ответить | Цитировать | Написать  
Как IE рассчитывает offsetWidth/offsetHeight?
    #36525209
Пономарёв
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пономарёв
Участник
krvsa ,
вот то, что получается в результате:
Код: 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.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<HEAD>
<STYLE>
HTML, BODY, DIV, SPAN /* from reset.css */
{
	padding-bottom: 0px;
	border-right-width: 0px;
	margin: 0px;
	padding-left: 0px;
	outline-width: 0px;
	padding-right: 0px;
	font-family: inherit;
	border-top-width: 0px;
	border-bottom-width: 0px;
	font-size:  100 %;
	vertical-align: baseline;
	border-left-width: 0px;
	padding-top: 0px;
}
HTML { height:  100 %;}
BODY
{
	font: 1em/ 1 .25em Tahoma, Helvetica, sans-serif;
	background: #fff;
	height:  100 %;
	color: black;
}
#box
{	
	background: url(img/preload.gif) #fff no-repeat  50 %  50 %;
	border: #e3e3e3 10px solid;
	display: none;
	position: absolute;
	padding: 10px;
	z-index:  2000 ;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#content { background: #fff;}
.header {
	background-color: #ccc;
	margin: -10px -10px 15px -10px;
	padding: 5px 10px;
}
.arr {	
	border: solid 1px #fff; /* без этой строчки небольшая шняга в IE… */
	margin: 2px  0 ;
}
.up1, .up2, .up3, .up4, .up5, .up6, .up7,
.down1, .down2, .down3, .down4, .down5, .down6, .down7 {
	background: url(img/arrows.png) no-repeat;
	cursor: pointer;
	float: left;
	height: 11px;
	position: relative;
		top: 0px;
	width: 21px;
}
.upN, .downN {
	float: left;
	height: 11px;
	position: relative;
		top: 0px;
	width: 21px;
}
.up1, .up2, .up3, .up4, .up5, .up6, .up7 { background-position:  0   0 ;}
.down1, .down2, .down3, .down4, .down5, .down6, .down7 { background-position:  0  -11px;}
.up1, .down1 { left: 24px;}
.up2, .down2 { left: 39px;}
.up3, .down3 { left: 54px;}
.up4, .down4 { left: 104px;}
.upN, .downN { left: 104px;}
.up5, .down5 { left: 154px;}
.up6, .down6 { left: 169px;}
.up7, .down7 { left: 184px;}
.up1:hover, .up2:hover, .up3:hover, .up4:hover,
.up5:hover, .up6:hover, .up7:hover { background-position: -21px  0 ;}
.down1:hover, .down2:hover, .down3:hover, .down4:hover,
.down5:hover, .down6:hover, .down7:hover { background-position: -21px -11px;}
.displayBkg1, .displayBkg2 {
	background: url(img/ip_b_display_bkg.png) no-repeat;
	height: 84px;
	width: 360px;
}
.displayBkg1 { background-position:  0   0 ;}
.displayBkg2 { background-position:  0  -83px;}
.modeLink {
	padding-top: .5em;
	text-align: right;
}
.modeLink SPAN {	
	border-bottom: dashed 1px;
	color: blue;
	cursor: pointer;
	font-size: .88em;
}
.decisionBtns {
	border-top: solid 1px #ccc;
	margin: 10px -10px  0  -10px;
	padding: 7px 10px  0 ;
}
.cancelBtn, .backBtn, .clearBtn, .okBtn {
	background-color: # 003366 ;/*#16316f;*/
	color: #fff;
	cursor: pointer;
	font-size: .88em;
	padding: .2em .7em;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.cancelBtn, .backBtn, .clearBtn { float: left;}
.backBtn, .clearBtn { margin-left: 10px;}
.clearBtn { background-color: #e55e5d;}
.okBtn { float: right;}
.disabledBtn { background-color: #aaa;}
.cancelBtn:hover, .backBtn:hover, .okBtn:hover { color: #a1b3fd;}
.clearBtn:hover { color: #eebfbf;}
.disabledBtn:hover { color: #fff; cursor: default;}
#f1, #f2, #f3, #f4, #f5, #f6, #f7, #f8, #f9 {
	background-image: url(img/ip_b_display_figures.png);	
	background-repeat: no-repeat;
	float: left;
	height: 52px;
	position: relative;
		top: 17px;
	width: 30px;
}
#f1 {	left: 21px;}
#f2 {	left: 27px;}
#f3 {	left: 33px;}
#f4 {	left: 38px;}
#f5 {	left: 44px;}
#f6 {	left: 49px;}
#f7 {	left: 55px;}
#f8 {	left: 61px;}
#f9 {	left: 67px;}
.f0 {	background-position:  0   0 ;}
.f1 {	background-position: -30px  0 ;}
.f2 {	background-position: -60px  0 ;}
.f3 {	background-position: -90px  0 ;}
.f4 {	background-position: -120px  0 ;}
.f5 {	background-position: -150px  0 ;}
.f6 {	background-position: -180px  0 ;}
.f7 {	background-position: -210px  0 ;}
.f8 {	background-position: -240px  0 ;}
.f9 {	background-position: -270px  0 ;}
.fA {	background-position: -300px  0 ;}
.fB {	background-position: -330px  0 ;}
.fC {	background-position: -360px  0 ;}
.fD {	background-position: -390px  0 ;}
.f- {	background-position: -420px  0 ;}
.fN {	background-position: 30px  0 ;}
.clearLeft { height: 0px; сlear: left;}
.clearRight { height: 0px; clear: right;}

</STYLE>
</HEAD>
<BODY>

<DIV id="box" style="background-image:none; filter:alpha(opacity=100); width:660px; display:block;
height:231px; top:310px; left:279px; opacity:1">
	<DIV id="content" style="display: block">
		<DIV class="header"><SPAN>Режим: количество осей в осн. канале.</SPAN></DIV>
			<DIV id="arrUp" class="arr">
			<DIV class="up1"></DIV>
			<DIV class="up2"></DIV>
			<DIV class="up3"></DIV>
			<DIV class="upN"></DIV>
			<DIV class="up5"></DIV>
			<DIV class="up6"></DIV>
			<DIV class="up7"></DIV>
			<DIV class="clearLeft"></DIV>
		</DIV>
		<DIV id="ipDisplayB" class="displayBkg1">
			<DIV id="f1" class="f0"></DIV>
			<DIV id="f2" class="f0"></DIV>
			<DIV id="f3" class="f0"></DIV>
			<DIV id="f4" class="f-"></DIV>
			<DIV id="f5" class="f6"></DIV>
			<DIV id="f6" class="f-"></DIV>
			<DIV id="f7" class="f0"></DIV>
			<DIV id="f8" class="f0"></DIV>
			<DIV id="f9" class="f0"></DIV>
		</DIV>
		<DIV id="arrDown" class="arr">
			<DIV class="down1"></DIV>
			<DIV class="down2"></DIV>
			<DIV class="down3"></DIV>
			<DIV class="downN"></DIV>
			<DIV class="down5"></DIV>
			<DIV class="down6"></DIV>
			<DIV class="down7"></DIV>
			<DIV class="clearLeft"></DIV>
		</DIV>
		<DIV class="modeLink"><SPAN>Переключить режим дисплея</SPAN></DIV>
		<DIV class="decisionBtns">
			<DIV class="cancelBtn">Отмена</DIV>
			<DIV class="clearBtn">Очистить</DIV>
			<DIV class="okBtn">Готово</DIV>
			<DIV class="clearRight"></DIV>
		</DIV>
	</DIV>
</DIV>

</BODY></HTML>

У DIV #box style="width" и style="height" это offsetWidth и offsetHeight динамически сформированного DIV #content .
...
Рейтинг: 0 / 0
17.03.2010, 07:34:34
| Ответить | Цитировать | Написать  
Как IE рассчитывает offsetWidth/offsetHeight?
    #36525257
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Ща посмотрю чего там...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
17.03.2010, 08:34:12
| Ответить | Цитировать | Написать  
Как IE рассчитывает offsetWidth/offsetHeight?
    #36525265
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Пономарёв , а какова цель твоего вычисления его размеров? Т.е. какого эфекта хочешь достигнуть?
...
Рейтинг: 0 / 0
17.03.2010, 08:42:25
| Ответить | Цитировать | Написать  
Как IE рассчитывает offsetWidth/offsetHeight?
    #36525267
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
ПономарёвУ DIV #box style="width" и style="height" это offsetWidth и offsetHeight динамически сформированного DIV #content .
Как вариант вот так его заЦССить...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
div#box {
	background-image:none; 
	filter:alpha(opacity= 100 ); 
/*
	width:660px; 
	height:231px; 
*/
	display:block;
	top:  30 %; 
	left:  20 %; 
	right:  20 %;
	opacity: 1 
}
...
Рейтинг: 0 / 0
17.03.2010, 08:46:14
| Ответить | Цитировать | Написать  
Как IE рассчитывает offsetWidth/offsetHeight?
    #36525406
Пономарёв
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пономарёв
Участник
krvsaа какова цель твоего вычисления его размеров? Т.е. какого эфекта хочешь достигнуть?
Этот скрипт показывает «псевдоокна» с разным контентом (то что я привет — один из вариантов, на котором размеры рассчитываются неверно), поэтому прописывать каждый раз размеры не есть хорошо…
...
Рейтинг: 0 / 0
17.03.2010, 10:10:58
| Ответить | Цитировать | Написать  
Как IE рассчитывает offsetWidth/offsetHeight?
    #36525417
Пономарёв
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пономарёв
Участник
Да тут собственно не в разметке дело. Я-то хотел узнать, как ИЕ рассчитывает offsetWidth.
...
Рейтинг: 0 / 0
17.03.2010, 10:16:13
| Ответить | Цитировать | Написать  
Как IE рассчитывает offsetWidth/offsetHeight?
    #36525443
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
ПономарёвДа тут собственно не в разметке дело. Я-то хотел узнать, как ИЕ рассчитывает offsetWidth.
Например, RTFMSDN . Можно про ДОМ почитать и всякое такое.
...
Рейтинг: 0 / 0
17.03.2010, 10:25:58
| Ответить | Цитировать | Написать  
Как IE рассчитывает offsetWidth/offsetHeight?
    #36526083
Пономарёв
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пономарёв
Участник
ShSerge,
Спасибо, ситуация немного прояснилась. Теперь осталось разобраться почему локально считает правильно, а с сети — нет.
...
Рейтинг: 0 / 0
17.03.2010, 13:49:12
| Ответить | Цитировать | Написать  
13 сообщений из 13, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как IE рассчитывает offsetWidth/offsetHeight?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=257&tid=1453379]:
 0ms
get settings:
 6ms
get forum list:
 10ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 323ms
get topic data:
 9ms
get forum data:
 3ms
get page messages:
 31ms
get tp. blocked users:
 1ms
others: 235ms
total:  624ms
созд. / загр.: 624ms
x
x
Закрыть


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