0

I want to make all the web pages in my web application to be compatible with the latest IE=Edge. Hence, I emulated my application using the IE developers tool and faced with a lot of broken CSS.

I understand this is common when we move a web page from quirks mode to standard mode. But, on debugging the js code, I came to understand the elements give back different offset values(offset width and offset height) in IE5 and IE edge respectively.

For eg-IE=5

<div id="menu1"> - offsetheight = 20, offsetwidth = 101

IE=Edge

<div id="menu1"> - offsetheight = 32, offsetwidth = 58

I need to obtain the same results when I emulate my application to IE Edge. Please let me know the reason for this behavior and a better solution to overcome the same. If possible, please suggest a method to obtain the same offset values in both the IE versions.

Turnip
  • 35,836
  • 15
  • 89
  • 111
Jerin Nishok
  • 13
  • 1
  • 6
  • why so you need to support IE5? Or even IE up to version 10? It should be ok to just support the latest IE version. – cloned Jul 24 '19 at 09:28
  • Yes, that is correct. It would be best to support IE latest version. Please provide me with a solution and reason for this behavior. – Jerin Nishok Jul 24 '19 at 09:54
  • the solution is to just support latest IE version. Or what do you want me to say? Don't test your site in IE5-10 and all is good. Just test it in IE 11 – cloned Jul 24 '19 at 10:14
  • I understand I need to support latest IE version. Can I know the exact reason why the offset values differ between IE5 and IE7 or higher? – Jerin Nishok Jul 24 '19 at 10:17
  • because old versions of IE implement stuff differently. Like how they calculate stuff... and everything basically. But why do you need to know this? – cloned Jul 24 '19 at 10:19
  • I need to exactly understand how IE5 and IE7 or higher versions calculate offset values. Because I am really confused about how the same DOM element and same JS code could deliver different offset values in different versions. Please provide me the exact reason or any reference links to understand this odd behavior on offset values. – Jerin Nishok Jul 24 '19 at 10:23
  • This site is for solving problems. What problem do you face by not having a full understanding of how IE5, IE6 and IE7 (hint: each does it probably in it's own way) caluclates offset? These browsers are not used anywhere anymore. Maybe some versions calculate margins and paddings to the calculations. or some css values are not applied correctly that results in different results. – cloned Jul 24 '19 at 11:10
  • From the whole discussion, can I conclude that different versions of IE calculate different offsets, and as my web page is designed based on offset values from IE5(quirks mode), it breaks the page design in IE7 or higher. Hence, can I say that the only solution is to opt for a complete rewrite of the page design to make it compatible with the latest IE version? – Jerin Nishok Jul 24 '19 at 11:16
  • since ie 5 is dead for nearly 15 years (since 2005), i think the rewrite should have been done many years ago. even ie10 is no longer supported for ~3 years – cloned Jul 24 '19 at 11:20
  • @JerinNishok Can you produce a code snippet that demonstrates these issues? You say you have "a lot of broken CSS", so obviously the solution is to repair all that, but you never show an example of the broken CSS, so nobody can suggest fixes. – Mr Lister Jul 24 '19 at 12:21
  • As an example, a problem could be that in quirks mode, lengths can be plain numbers without units, like `width:101;`. In quirks mode, this is 101 pixels, but it is ignored as an error in strict mode. Run your CSS through a CSS validator to flag all these issues. Then when the CSS is error free and it still doesn't behave the way you need, show us some examples. – Mr Lister Jul 24 '19 at 12:24
  • i think if the site was created for ie5 then these issues will be too much for a single post. since so much has changed in last 15 years. I wouldn't even try to update sites from ie7 to todays standards. – cloned Jul 24 '19 at 13:08
  • @MrLister The webpages I am working on are constructed based on a js file which obtains the offset values from the DOM element (by basic DOM manipulation) and decides its position and size on the view-port. By the phrase "Broken CSS", I tried to mean that the appearance of the webpage is discarded in any version >IE5. And finally, from this long chain of discussion, I'm able to understand that different IE versions calculate offset values differently. Hence, the only solution that I have in my head is to go for a complete rewrite of the way the webpages are constructed in the application. – Jerin Nishok Jul 24 '19 at 14:15
  • @cloned I am working on a legacy application to upgrade its compatibility from only IE5 quirks mode to IE latest version. **The objective is to get the same web application render and work flawlessly in IE latest version as it currently does in IE5 quirks mode.** On studying the code, I understood the above problems and hence searching for a solution. – Jerin Nishok Jul 24 '19 at 14:21

0 Answers0