VPF::IE6 и FF2 отображают страницу по разному

Michael.de

Дата 12.8.2008, 01:14 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 346
Регистрация: 22.3.2005
Где: Deutschland

Репутация: 4
Всего: 9

Продолжение >>этой<< темы. smile

Код:

Код


<html>
<head>
<script type="text/javascript">

function init(){
 var color = new Array('FFFFDD', 'DDFFFF', 'FFDDFF', 'DDDDDD');
 var len = color.length;
 var a = new Array(len);
 var text = new Array(
  "Page 4.<br/><br/> NetBeans IDE <img style='float:left;margin:5px' src='http://www.netbeans.org/images/v6/nb-logo-frontpage.gif'>comes with your choice of GlassFish or Tomcat installed, as well as the Java DB database server.<br/><br/> You can easily integrate other tools, like the JBoss application server and MySQL database server.",
  "Page 3.<br/><br/> Take advantage of full syntax highlighting, code completion, and error checking for JavaScript, CSS and PHP.<br/> The Editor recognizes JavaScript code in stand-alone JavaScript files as well as in HTML, RHTML, and JSP files. The visual CSS editor allows you to edit CSS rules and preview the results.",
  "Page 2.<br/><br/> Using an Ajax-enabled component is like working with any other component in the IDE: Drag and drop the component, set properties, and customize server-side event handlers.<br/> This dynamic Ajax behavior is implemented via Project Dynamic Faces.",
  "Page 1.<br/><br/> Built into the NetBeans Visual JSF framework is a collection of Java Server Faces-based, Ajax-enabled user interface components from Project Woodstock.<br/> Using these components, you can build consistent, accessible and dynamic web pages. Project Woodstock components are free and open-source."
 );
 var e = 'px';
 for (var i=0; i<len; i++){
  a[i] = document.createElement('div');
  a[i].style.position = 'absolute';
  a[i].style.left = 20+255*i+e;
  a[i].style.top = 20+e;
  a[i].style.width = 250+e;
  a[i].style.height = 300+e;
  a[i].style.padding = 5+e;
  a[i].style.backgroundColor = color[i];
  a[i].style.border='3px double #AAAAFF';
  a[i].innerHTML=text[i];
  a[i].onclick = show;
  document.body.appendChild(a[i]);
 }
}

function show() {alert(this.innerHTML);}

</script>
</head>
<body onload='init();'>
</body>
</html>

Вопрос: почему MSIE6 и FireFox2 по разному отображают <div>? В FF получаемый <div> больше (шире и выше). Это какой-то глюк с object.style.padding или я чего-то упустил?

ksnk

Дата 12.8.2008, 07:36 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Вообще-то потому, что FF и IE по разному относятся в "ширине элемента". FF думает, что в ширину не входят паддинги и бордеры, а IE - что входят. Чтобы их как-то образумить. нужно прописывать доктайп. ну, или вкладывать див с украшениями в див без паддингов. Как-нибудь так:

Код


<html>
<head>
<script type="text/javascript">
function init(){
 var color = new Array('FFFFDD', 'DDFFFF', 'FFDDFF', 'DDDDDD');
 var len = color.length;
 var a = new Array(len);
 var text = new Array(
  "Page 4.<br/><br/> NetBeans IDE <img style='float:left;margin:5px' src='http://www.netbeans.org/images/v6/nb-logo-frontpage.gif'>comes with your choice of GlassFish or Tomcat installed, as well as the Java DB database server.<br/><br/> You can easily integrate other tools, like the JBoss application server and MySQL database server.",
  "Page 3.<br/><br/> Take advantage of full syntax highlighting, code completion, and error checking for JavaScript, CSS and PHP.<br/> The Editor recognizes JavaScript code in stand-alone JavaScript files as well as in HTML, RHTML, and JSP files. The visual CSS editor allows you to edit CSS rules and preview the results.",
  "Page 2.<br/><br/> Using an Ajax-enabled component is like working with any other component in the IDE: Drag and drop the component, set properties, and customize server-side event handlers.<br/> This dynamic Ajax behavior is implemented via Project Dynamic Faces.",
  "Page 1.<br/><br/> Built into the NetBeans Visual JSF framework is a collection of Java Server Faces-based, Ajax-enabled user interface components from Project Woodstock.<br/> Using these components, you can build consistent, accessible and dynamic web pages. Project Woodstock components are free and open-source."
 );
 var e = 'px';
 for (var i=0; i<len; i++){
  var d=document.getElementById('div_tpl');
  d=d.cloneNode(true); d.removeAttribute('id');
  d.style.left = 20+255*i+e;
  d.style.backgroundColor = color[i];
  d.getElementsByTagName('div')[0].innerHTML=text[i];
  d.onclick = show;
  a[i]=document.body.appendChild(d);
 }
}
function show() {alert(this.innerHTML);}
</script>
</head>
<body onload='init();'>

<!--   шаблончеги :on -->
<div style="display:none;">

<!--   дивный шаблон -->
<div id="div_tpl" style="position:absolute;left:20px;top:20px;width:250px;height:300px;">
<div style="height:100%;padding:5px;border:3px double #AAAAFF;">
</div>
</div>
<!--   шаблончеги :off -->
</div>
</body>
</html>

Кстати, прием с клонированием элемента-шаблона позволит вытащить уродливый код по раскраске элемента из JS ;-)

Добавлено @ 07:37
Глюки, правда остались. Рамка вылезает за элемент в FF, но принцип решения , наверное, такой-же smile

Это сообщение отредактировал(а) ksnk - 12.8.2008, 07:38

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Michael.de

Дата 12.8.2008, 14:19 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 346
Регистрация: 22.3.2005
Где: Deutschland

Репутация: 4
Всего: 9

ksnk, спасибо за ответ smile

А может проверять на document.all ???

Код


if (document.all){
 // оставить всё как есть
}
else {
 // уменьшить width и height на два padding-а и border-а
}

Цитата

... Кстати, прием с клонированием элемента-шаблона позволит вытащить уродливый код по раскраске элемента из JS ;-) ...

Если имеется ввиду пропись всех свойств в CSS вместо JavaScript... не знаю, мне так нравится smile

Это сообщение отредактировал(а) Michael.de - 12.8.2008, 14:20

Michael.de

Дата 13.8.2008, 02:27 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 346
Регистрация: 22.3.2005
Где: Deutschland

Репутация: 4
Всего: 9

Кстати да, есть смысл добавлять объекту styles в экстра ф-ции - так короче smile

т.е. вместо:

Код


...
a[i] = document.createElement('div');
a[i].style.position = 'absolute';
a[i].style.left = 20+255*i+e;
a[i].style.top = 20+e;
a[i].style.width = 250+e;
a[i].style.height = 300+e;
a[i].style.backgroundColor = color[i];
...
document.body.appendChild(a[i]);
...

что-то вроде:

Код


...
a[i]=createObject('div', 'absolute', 20+255*i, 20, 250, 300, color[i]);
...
function createObject(el, p, l, t, w, h, c){
 var e='px', o=document.createElement(el);
 if (p!=null) o.style.position=p;
 if (l!=null) o.style.left=l+e;
 if (t!=null) o.style.top=t+e;
 if (w!=null) o.style.width=w+e;
 if (h!=null) o.style.height=h+e;
 if (c!=null) o.style.backgroundColor=c;
 document.body.appendChild(o);
 return o;
}

...особенно если это многократно повторяется в коде smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »