如何让该网站在 Internet Explorer 8 及更低版本中正确呈现？答案

【问题标题】：How do I get this website to render correctly in Internet Explorer 8 and below?如何让该网站在 Internet Explorer 8 及更低版本中正确呈现？
【发布时间】：2014-05-27 11:22:21
【问题描述】：

我昨晚创建了一个可以在 Chrome、Firefox、Safari 和 Opera 中运行的网站，但在 Internet Explorer 中无法运行

我尝试在 head 标签中创建条件样式和 html5.shiv。我的代码如下所示：

<!DOCTYPE html>
<html>

    <head>
        <title>Flat Design</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
        <link href="css/hover.css" rel="stylesheet" media="all">
        <!--[if lt IE 9]>
            <script src="dist/html5shiv.js" type="text/javascript"></script>
            <script src="PIE.js" type="text/javascript"></script>
            <style type="text/css">
                .wrap {
                    width: 980px;
                }
                .logo {
                    float: left;
                }
                .main-nav {
                    float: right;
                }
                .main {
                    width: 40.425531914894%;
                    height: 900px;
                    margin: 0;
                }
                .secondary {
                    width: 36.170212765957%;
                    height: 900px;
                    margin-left: 15px;
                }
                .extra {
                    display: block;
                    width: 23.404255319149%;
                    height: 900px;
                }
            </style>
        <![endif]-->
    </head>
     <body>
<div class="wrap">
    <header class="main-header">
        <a class="logo" href="#"><h2>My Experience in Web Development</h2> </a>
        <nav class="main-nav">
            <a link href="#" class="hover">Home</a>
            <a link href="#" class="hover">About</a>
            <a link href="#" class="hover">Clients</a>
            <a link href="#" class="hover">News</a>
            <a link href="#" class="hover">Contact</a>
        </nav>
    </header>
    <div class="content">

        <div class="main col">
            <h3>My candid experience in trying to find a job as a Web  Developer</h3>
            <p>It hasn't been a dull moment ever since I decided to switch careers to web development.</p>
            <p>I've taken up the arduous task of putting together a portfolio of several pieces of my best work. At the same time, I brushed up on my skillset by taking online courses at <a href="http://teamtreehouse.com">Team Treehouse</a> and several <a href="http://youtube.com">YouTube</a> tutorials, as well as utilized sites such as <a href="http://http://stackoverflow.com">Stack Overflow</a>, <a href="http://sitepoint.com">SitePoint</a>, <a href="http://designmodo.com"/>Designmodo</a>,<a href="http://sixrevisions.com">Six Revisions</a>, etc.</p>

        </div>
        <div class="secondary col">
            <h3>Hitting the pavement for a job in web development.</h3>
            <p>In December of 2012, I decided to put my resume online to see what the job market was like in web development.</p>
            <p>A month later,I landed an assignment at Web 4 Purpose as a jr. front end web developer.I handled all of the CSS,HTML,Javascript coding from wireframes done in Adobe Photoshop or drawn.<br></p>
          </div>
           <div class="extra col">
            <h3>There's several web technologies.</h3>
            <p>Here's a short list of the several web technologies out there:</p>
            <ol>
                <li><a href="http://www.w3schools.com/html/html5_intro.asp">HTML5</a></li>
                <li><a href="http://www.w3schools.com/css/css3_intro.asp">CSS3</a></li>
                <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">Javascript</a></li>
                <li><a href="http://jquery.com">JQuery</a></li>
                <li><a href="http://getbootstrap.com">Bootstrap</a>   </li>
                <li><a href="http://foundation.zurb.com">Foundation</a></li>
                <li><a href="http://angularjs.org">Angular.js</a>       </li>
            </ol>
            <br>
        </div>
    </div>
    <footer class="main-footer">
        <a href="http://twitter.com/MikeLegemah"><img src="img/twitter.png" alt="Twitter" class="social-icon"></a>
        <a href="http://facebook.com"><img src="img/facebook.png" alt="Facebook" class="social-icon"></a>
        <a href="http://linkedin.com"><img src="img/linkedin.png" alt="LinkedIn" class="social-icon"></a>
        <a href="http://youtube.com"><img src="img/youtube.png" alt="YouTube" class="social-icon"></a>
        <a href="http://googleplus.com"><img src="img/googleplus.png" alt="Google Plus" class="social-icon"></a>
        <p>&copy; 2014 <a href="http://michaellegemah.com">michaellegemah.com</a></p>
    </footer>
  </div>
   </body>
    </html>

CSS 表是这样的：

                    * {
box-sizing: border-box;

   }
   body {
margin: 0;
padding-top: 25px;
background: #ECF0F1;
color: #FFF;
font: 1.3em/1.6 sans-serif; 

  }
  .wrap {
margin: auto;
width: 90%; 

  }
 .main-header {
background: #2C3E50;
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: 900;

 }
.logo, 
 .main-nav a {
display: inline-block;
color: #FFF;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-weight: 900;

 }
 .main-nav a {
padding: 0 .75em;
border-right: 1px dotted;
color: #FFF;
font-size: .7em;
line-height: 1rem;
   }
  .main-nav a:hover {
text-decoration: underline;
  }
 .main-nav a:last-child {
border-right: none;
 }
  .content, 
 .main-header {
overflow: hidden;
  }
  .col {
height: auto;
  }
 .main {
background: #3498DB;
font-family: 'Lato', sans-serif;
 }

 h3 {
font-weight: 900;
 }
 li a, a {
text-decoration: none;
color: #FFF;
font-weight: 900;
  }
 .secondary {
background: #2ECC71;
font-family: 'Lato', sans-serif;
  }
.extra {
display: none;
background: #C0392B;
font-family: 'Lato', sans-serif;
  }
.main-footer {
background: #95A5A6;
font-family: 'Lato', sans-serif;
}

.social-icon {
 width: 40px;
 height: 40px;
 margin: 0 5px;
 border: none;
 }

 .main-header, 
 .main-footer, 
 .col {
margin-bottom: 15px;
padding: 2.15%;
border-radius: 5px;

 }










/* ==========================================================================
  Media Queries
 ========================================================================== */


/* Phones to Tablets */

 @media only screen and (min-width: 481px) {
.col {
    float: left;
}
.main {
    width: 65.957446808511%;
    height: 900px; 
}
.secondary {
    width: 31.914893617021%;
    height: 900px; 
}
.secondary,
.extra {
    margin-left: 2.127659574468%;
 }
}



/* Tablets to Desktop */

    @media only screen and (min-width: 769px) { 
.logo {
    float: left;
}
.main-nav {
    float: right;
}
.main {
    width: 40.425531914894%;
    height: 900px;
}
.secondary {
    height: 900px;
}

.extra {
    display: block;
    width: 23.404255319149%;
    height: 900px;
}
 }

    @media only screen and (min-width: 1024px) {    
.wrap {
    width: 980px;
}
  }

不幸的是，结果是这样的：http://flatdesign.originexample.site90.com 在除 IE 之外的所有浏览器中看起来都很好

如果有人看到我可能忽略的任何内容，或者如果有更好的解决方案，请告诉我，谢谢

【问题讨论】：

检查你的图片，好像出了点问题
你也可以发布你身体的结构（标签）吗？ html5shiv.js 应该处理 IE8 无法识别的主要标签，但你可能使用了一些不寻常的东西......
非常感谢@AmeliaBR 这是该网站的链接：flatdesign.originexample.site90.com 它在除 IE 之外的所有浏览器中都能正常工作

标签： html css internet-explorer web

【解决方案1】：

使用 IE11 开发者工具模拟器来模仿 IE8，我看到了两个主要区别：

没有圆角；
列不是并排浮动的；

边界半径不能轻易修复，并且不会真正影响性能，所以我希望你可以忽略它。

浮动列是让它看起来很丑的原因，幸好这很容易修复。

您正在使用以下规则创建列：

@media only screen and (min-width: 481px){
  .col {
    float: left;
  }
}

问题在于“唯一”关键字。该关键字旨在防止无法识别媒体查询的浏览器应用该样式。这包括 IE8。它将其读取为对名为“only”的媒体类型的媒体查询；它不识别该类型，因此它不应用该样式。如果您删除关键字：

@media screen and (min-width: 481px){
  .col {
    float: left;
  }
}

然后 IE8 将其读取为 @media screen blah,blah,blah。它会忽略它不理解的内容，并将规则应用于所有屏幕，无论它们的宽度如何。

对于 IE8，这可能没问题，因为没有人在手持设备上使用 IE8。如果他们的屏幕太窄，那也没关系，因为这只是意味着浮动元素会一个接一个地结束，就像没有浮动一样。

此更改可能还会影响一些无法识别min-width 类型媒体查询的旧手持设备，但同样，浮动非常灵活。

还有一件事：即使我在您的列中添加了一个浮点属性，第三列也不适合与其他列排成一行。两个可能的罪魁祸首：IE8 会自动在您不期望的地方添加填充或边距，或者它们会将长度四舍五入到下一个像素，这会导致您的添加被丢弃。稍微玩一下这些设置应该让它们并排。如果您让 last 列浮动 right 而不是向左浮动，您可以在不破坏设计的矩形线条的情况下稍微缩小边距。

【讨论】：