All geek questions in one place

IE 8 Website Compatibility Issues

So, I created the beginning of the website. If I run it in Internet Explorer 8 or lower, all (most) of the html style seems to disappear. Here is what I have checked so far;

I checked the W3C validation check and it works fine and error-free, I checked IE8 compatibility with HTML5 and I don't use anything that is not compatible. I changed the version of Internet Explorer using the IE development tools, and it shows that the css attributes were successfully paired with the corresponding elements, but they just don't appear on the page. Therefore, I did not have enough strength to try to verify. Below is the entire site (it is only small).

index;

<!DOCTYPE html> <html> <head> <title>Your Indy Buddy</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8"> </head> <body id="body"> <nav id="titlebar"> <h1><img src="Other/eve.png" style="float:left;margin-right:200px;" alt="Image Not Displayed"/>EVE ONLINE INDY BUDDY</h1> <nav id="utilbar"> <p style="margin-left:0px;">Your Time:</p> <form> Email <input type="text" name="email"/> Password <input type="text" name="password"/> <button type="button" onclick="">Login</button> </form> <p style="margin-left:0px;">Eve Time : </p> </nav> <p>Not registered? Register</p> </nav> <br/> <nav id="main"> <h2>Test</h2> </nav> </body> </html>

style.cs;

 /* Reset above occluded */ h1 {font-size:40px;margin-left:10px;margin-bottom:20px;} p {margin-top:10px;margin-left:10px;} #body {background-image:url("Other/background.jpg");background-color:#000000;font-family:"Arial Black", Gadget, sans-serif;color:rgb(200,200,200);font-size:14px;} #main {width:890px;margin:auto;padding:12px;background-color:rgba(145,49,28,0.9);margin-top:180px;} #titlebar {width:926px;padding-top:10px;padding-bottom:10px;background-color:rgb(24,24,24);position:fixed;left:50%;margin-left:-463px;margin-top:12px;} #utilbar {width:906px;padding:10px;background-color:rgb(145,49,28)} #utilbar form {float:right;position:absolute;right:10px;top:85px;} #utilbar input {font-family:sans-serif;background-color:rgb(180,80,45);border:2px solid rgb(201,113,87);} #utilbar button {font-family:'Arial Black', Gadget, sans-serif;color:rgb(200,200,200);background-color:rgb(160,60,40);border:2px solid rgb(180,100,70);} #utilbar button:hover {background-color:rgb(100,30,10);border:2px solid rgb(160,60,30);}

Sorry that you compiled the code guys, but I didn’t have the strength and am frankly a bit confused. If it were IE7, and below it just didn't work, I would just ignore it. But still, many companies still work on IE8.

+4
source share
3 answers

Like Sheikh Heher, HTML5 elements are not supported in IE8 and below. You will need to include the HTML5 padding in your code. Just paste the following into the element <head> :

 <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

This essentially allows IE6-8 to support HTML5 elements such as <nav> , <header> , <footer> , etc.

Here is a great background in HTML5 shim / shiv, if you're interested.

+8
source

If you do not want to add html5 shim, you can do it manually by adding some JS and CSS

JS:

 <!--[if lt IE 9]> <script> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); document.createElement('main'); </script> <![endif]-->

CSS

 header, nav, section, article, aside, footer, main{ display: block; }
+2
source

I recommend you take a look at Modernizr .

Quote from Modernizr.com

Why use Modernizr?

Using cool new web technologies is a great pleasure until you have to support browsers that are lagging behind. Modernizr makes it easy to write conditional JavaScript and CSS to handle each situation, whether the browser supports a feature or not. It is ideal for rapid progression.

+1
source

Source: https://habr.com/ru/post/1490367/

More articles:


All Articles