I have tried to use:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
in the <head> section of my static html page.
I am using this to assure access to newer CSS elements.
This works great and I am able to use table:last-of-type in IE9 browser.
However, when I use that meta tag, the first line of text on my page is moved down like it is being padded.
I have tried other meta tags such as:
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv=\"date\" content="Wed, 16 Feb 2011 22:34:13 GMT" />;
<meta name="description\" content="How to use Meta Tags">
I can leave all of those on and the mystery padding does not appear.
It only happens when I use the above mentioned.
I can use: <meta http-equiv="X-UA-Compatible" content="IE=7" /> and the first line position is correct however that defeats the purpose of using it in the first place to assure the newest CSS features.
Additionally,
these also create the mystery first line padding :
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
The first line of my static html page is just text.
The most simple example I can give is:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
Here is the first line of text.
</body>
</html>
If you take out that meta tag the page prints ~1 line higher.
Does anyone know of a work-around for this or what I am doing wrong?
To get rid of weird spacing issues when using content="IE=edge" use this as your html declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">and in body tag add this:
It worked for me in IE, Firefox, and Chrome.