Initializr template not rendering correctly in IE 8

StackOverflow https://stackoverflow.com/questions/21318416

题

I am creating a new site using the Initializr template. It looks great on modern web browsers. I though it was optimized for compatability but when I open it in Internet Explorer 8 (a browser I must unfortunarly support) it looks like this:

enter image description here

As you can see the tab navigation is not rendering properly.

I am using the default:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->

<html class="no-js">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/main.css">

    <script src="js/vendor/modernizr.custom.82220.js"></script>
</head>

The only difference above is that I tried updating modernizr to see if it would fix the problem but the result is the same. How can I get HTML5 boilerplate to render correctly in IE 8?

有帮助吗？

解决方案

The problem was resolved adding this to the css page:

@media only screen and (min-width: 480px) {
    .lt-ie9 nav a { margin: 0 0.7%; }
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top