CODEWITHSUNDEEP
jquerycsshtmlinternet-explorer-8
zgood
zgood

Reputation: 12581

Odd IE8 html5shiv behavior

Consider the following...

<!DOCTYPE>
<html>
<head>
    <title></title>
    <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
        main{
            width:500px;
            height:500px;
            margin:0 auto;
            border:5px solid red;
            display:none;  
        }
    </style> 
</head>
<body>
    <main>
        <h1>Test</h1>
    </main>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        //load some external content then on callback...
        $('main').show();
    });
</script>
</html>

Works fine in every browser but IE8 (shocker). If you remove the display:none; then all is well, so I am assuming this is the problem. But why?

What I am trying to accomplish

<main> is my wrapper which contains a <nav>, <footer> and a <div> to inject content into via an ajax call. There is a slight awkward flicker when the site first loads and injects the landing page content into the empty <div> content holder. Not a huge deal, but I wanted something easier on the eyes so I added a display:none; to the main style definition and added a show() or fadeIn() once the content was loaded to prevent the flicker. Works... except in IE8. Its as if <main> loses its display defined by the shiv and defaults to inline.

Things I have tried

I have replaced the <main> tag with <div id="main"> and this works fine. But I am trying to embrace HTML5 and would like to use the <main> tag.

I know this is minor, I just get frustrated when I don't understand the why.

Upvotes: 0

Views: 269

Answers (1)

bphillips
bphillips

Reputation: 459

Can't take complete credit for this... the other developer I work with is a jQuery yoda....

jQuery appears to, by default, add a css style of 'display:inline;' to tag elements. Because 'main' is not defined as known element (such as a div) in IE, it defaults to 'inline'. A few solutions may be:

$('main').css('display','block');

or for fade:

var $main = $('main');
$main.css('display','block').hide().show(600); //--not yet tested

Upvotes: 1

Related Questions