Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как IE рассчитывает offsetWidth/offsetHeight? / 13 сообщений из 13, страница 1 из 1
16.03.2010, 12:53:26
    #36523097
Пономарёв
Пономарёв
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как IE рассчитывает offsetWidth/offsetHeight?
В общем такая ерунда: есть скрипт, который показывает модальное окошко. Скрипту можно явно указать размеры 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, 13:15:27
    #36523205
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как IE рассчитывает offsetWidth/offsetHeight?
Пономарёвесть скрипт, который показывает модальное окошко
Здаётся мне оно не модальное... И даже не окно вовсе...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2010, 15:00:26
    #36523630
Пономарёв
Пономарёв
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как IE рассчитывает offsetWidth/offsetHeight?
Ну это я образно, конечно. Оно «псевдомодальное» — скрипт создает и показывает DIV и убирается он только по нажатию кнопочки «Готово». Извините, ошибся в выражении.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2010, 15:08:02
    #36523658
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как IE рассчитывает offsetWidth/offsetHeight?
Пономарёв , может его сверстать как-то так, чтобы не вычислять его размеры? Пусть сам их и делает...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2010, 15:09:57
    #36523662
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как IE рассчитывает offsetWidth/offsetHeight?
Тестовый примерчик с этим ДИВом покажи. Так чтобы он сразу в разметке присутствовал, а не создавался скриптом...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.03.2010, 07:34:34
    #36525209
Пономарёв
Пономарёв
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как IE рассчитывает offsetWidth/offsetHeight?
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, 08:34:12
    #36525257
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как IE рассчитывает offsetWidth/offsetHeight?
Ща посмотрю чего там...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.03.2010, 08:42:25
    #36525265
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как IE рассчитывает offsetWidth/offsetHeight?
Пономарёв , а какова цель твоего вычисления его размеров? Т.е. какого эфекта хочешь достигнуть?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.03.2010, 08:46:14
    #36525267
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как IE рассчитывает offsetWidth/offsetHeight?
ПономарёвУ 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, 10:10:58
    #36525406
Пономарёв
Пономарёв
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как IE рассчитывает offsetWidth/offsetHeight?
krvsaа какова цель твоего вычисления его размеров? Т.е. какого эфекта хочешь достигнуть?
Этот скрипт показывает «псевдоокна» с разным контентом (то что я привет — один из вариантов, на котором размеры рассчитываются неверно), поэтому прописывать каждый раз размеры не есть хорошо…
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.03.2010, 10:16:13
    #36525417
Пономарёв
Пономарёв
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как IE рассчитывает offsetWidth/offsetHeight?
Да тут собственно не в разметке дело. Я-то хотел узнать, как ИЕ рассчитывает offsetWidth.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.03.2010, 10:25:58
    #36525443
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как IE рассчитывает offsetWidth/offsetHeight?
ПономарёвДа тут собственно не в разметке дело. Я-то хотел узнать, как ИЕ рассчитывает offsetWidth.
Например, RTFMSDN . Можно про ДОМ почитать и всякое такое.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.03.2010, 13:49:12
    #36526083
Пономарёв
Пономарёв
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как IE рассчитывает offsetWidth/offsetHeight?
ShSerge,
Спасибо, ситуация немного прояснилась. Теперь осталось разобраться почему локально считает правильно, а с сети — нет.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как IE рассчитывает offsetWidth/offsetHeight? / 13 сообщений из 13, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 727ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1453379]:
 0ms
get settings:
 8ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 454ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 46ms
get tp. blocked users:
 1ms
others: 186ms
total:  727ms
x
x
Закрыть


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