如何在Internet Explorer 8及更低版本中正确呈现此网站？

时间：2014-04-13 14:49:39

标签： html5 css3 internet-explorer web

昨晚我创建了一个可以在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

之外的所有浏览器中看起来都很好

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

1 个答案:

答案 0 :(得分：0)

使用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类型媒体查询的旧手持设备，但浮动内容非常灵活。

还有一件事：即使我将float属性添加到您的列中，第三列也与其他列不匹配。两个可能的罪魁祸首：IE8会自动添加填充或边距，这是你不期望的地方，或者它们的长度可以缩小到下一个像素，并且会导致你的添加失败。一点点玩这些设置应该让它们并排。如果你将最后一个列浮动右而不是左边，你可以在不破坏设计的矩形线条的情况下使边距略微缩小。

相关问题
最新问题