为旧浏览器设计，向后兼容[关闭]答案

【问题标题】：Design for old browser, backwards compatibility [closed]为旧浏览器设计，向后兼容[关闭]
【发布时间】：2014-06-24 00:48:33
【问题描述】：

我想为旧浏览器 IE7 及更高版本同步我的设计。这是我针对旧浏览器 IE7 及更高版本的设计，我搜索并找到了一个工具来下载和使用 Javascript 来实现代码。有没有其他方法可以做到这一点？

这是我的 HTML：

<!DOCTYPE html>
<html lang="en-us">
<head>

    <title>Nitro Data Networks Teleserv Corporation</title>

    <meta name="viewport" content="width=device-width">
    <meta charset="utf-8">

    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>


    <link rel="stylesheet" type="text/css" href="http://nitrodatanetworks.com/assets/main.css"/>
    <link rel="stylesheet" type="text/css" href="http://nitrodatanetworks.com/assets/contact.css"/>
     <script src="http://nitrodatanetworks.com/assets/modernize.js.css"/>" type="text/javascript"></script>


</head>


    <body>
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', '--snip--', '--snip--');
  ga('send', 'pageview');

</script><div id="wrapper">
    <div id="header">
        <ul>
            <a href="http://nitrodatanetworks.com/index.php">   <li>
          <img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/65-32.png">Home</a></li>
               <a href="http://nitrodatanetworks.com/index.php/welcome/login">   <li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/91-32.png">Login</a></li>
             <a href="http://nitrodatanetworks.com/index.php/welcome/profile">  <li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/88-32.png"> Profile</li>
             <a href="http://nitrodatanetworks.com/index.php/welcome/service">    <li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/16-32.png">Services</li>
          <a href="http://nitrodatanetworks.com/index.php/welcome/contact"> <li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/04-32.png">Contact us</a></li>
            <div id="social">
            <li>Like Us!<img src="https://cdn1.iconfinder.com/data/icons/social_balloons/48px/social_balloon-14.png"></li>
             <li>Tweet!<img src="https://cdn1.iconfinder.com/data/icons/social_balloons/48px/social_balloon-05.png"></li>
              <li>Plus!<img src="https://cdn1.iconfinder.com/data/icons/social_balloons/48px/social_balloon-19.png"></li>

              </div>


        </ul>
    </div>


    <!---------------------------header------------------->  <!---------------slideshow--------------------->
    <ul class="slides">
        <input type="radio" name="radio-btn" id="img-1" checked />
        <li class="slide-container">
            <div class="slide">
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRphs0UnDqpha8RwnVqAXzwB9p1Z8in352q4bjo1pPFmMffniIA6g" />
                <p class="text">Nitro Data Networks Teleserv Corporation</p>
              <p class="subtext">We are focus on aligning IT services with the needs of our client's business.</p>
            </div>
            <div class="nav">
                <label for="img-6" class="prev">&#x2039;</label>
                <label for="img-2" class="next">&#x203a;</label>
            </div>
        </li>
        <input type="radio" name="radio-btn" id="img-2" />
        <li class="slide-container">
            <div class="slide">
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRphs0UnDqpha8RwnVqAXzwB9p1Z8in352q4bjo1pPFmMffniIA6g" />
                <p class="text">Flexibility</p>
                <p class="subtext">VoIP systems allow end-users to carry their phone number everywhere on the planet,
as long as the location has internet access. This is significantly beneficial to 
companies, organizations, and agencies that conduct business domestically and 
internationally.</p>
            </div>
            <div class="nav">
                <label for="img-1" class="prev">&#x2039;</label>
                <label for="img-3" class="next">&#x203a;</label>
            </div>
        </li>
        <input type="radio" name="radio-btn" id="img-3" />
        <li class="slide-container">
            <div class="slide">
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRphs0UnDqpha8RwnVqAXzwB9p1Z8in352q4bjo1pPFmMffniIA6g" />
                <p class="text">Cost Savings</p>
                <p class="subtext">Leveraging VoIP to make international calls can translate into huge savings for end-
users over traditional phone lines. Most VoIP providers offer their consumers 
excellent rates when making calls internationally.</p>
            </div>
            <div class="nav">
                <label for="img-2" class="prev">&#x2039;</label>
                <label for="img-4" class="next">&#x203a;</label>
            </div>
        </li>   
        <input type="radio" name="radio-btn" id="img-4" />
        <li class="slide-container">
            <div class="slide">
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRphs0UnDqpha8RwnVqAXzwB9p1Z8in352q4bjo1pPFmMffniIA6g" />
                <p class="text">Nitro Data Networks Teleserv Corporation</p>
                <p class="subtext">We are focus on aligning IT services with the needs of our client's business.</p>
            </div>
            <div class="nav">
                <label for="img-3" class="prev">&#x2039;</label>
                <label for="img-5" class="next">&#x203a;</label>
            </div>
        </li>
        <input type="radio" name="radio-btn" id="img-5" />
        <li class="slide-container">
            <div class="slide">
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRphs0UnDqpha8RwnVqAXzwB9p1Z8in352q4bjo1pPFmMffniIA6g" />
                 <p class="text">Application Integration</p>
  <p class="subtext">VoIP solutions save the end-user time and money by integrating web applications,
email, audio, and data with telephone requirements into one easy-to-use application.</p>
            </div>
            <div class="nav">
                <label for="img-4" class="prev">&#x2039;</label>
                <label for="img-6" class="next">&#x203a;</label>
            </div>
        </li>
        <input type="radio" name="radio-btn" id="img-6" />
        <li class="slide-container">
            <div class="slide">
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRphs0UnDqpha8RwnVqAXzwB9p1Z8in352q4bjo1pPFmMffniIA6g" />
                <p class="text">Nitro Data Networks Teleserv Corporation </p>
                <p class="subtext"> Nitro Data's Core team has played a leading role across a broad range of industry activities, built successful businesses and created sustainable long-term relationships with our partners.</p>
            </div>
            <div class="nav">
                <label for="img-5" class="prev">&#x2039;</label>
                <label for="img-1" class="next">&#x203a;</label>
            </div>
        </li>
        <li class="nav-dots">
            <label for="img-1" class="nav-dot" id="img-dot-1"></label>
            <label for="img-2" class="nav-dot" id="img-dot-2"></label>
            <label for="img-3" class="nav-dot" id="img-dot-3"></label>
            <label for="img-4" class="nav-dot" id="img-dot-4"></label>
            <label for="img-5" class="nav-dot" id="img-dot-5"></label>
            <label for="img-6" class="nav-dot" id="img-dot-6"></label>
        </li>
    </ul>
    <!------------------------------------>    <div id="nav-post">
         <h2>Coming soon</h2>

        <p> Nitro Data Networks Teleserv Corporation (Nitro Data) is one of the trusted technological solutions provider for many computer-telecommunication. Nitro Data has served to assist many organizations in using their computer-telecommunications assets more efficiently and effectively. Our services are all inline with the internationally accredited set of practices for IT service management. 
</p>
    </div>
    <hr>
    <div id="services">
    <h2>VOIP Benefits</h2>
        <ul>
            <li>
                <label for="img-1" style="cursor:pointer;">
                    <img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/19-64.png">
                    <a href="http://nitrodatanetworks.com/index.php/welcome/login">  <h1>Application Integration</h1></a>

                    <p>VoIP solutions save the end-user time and money by integrating web applications, email, audio, and data with telephone requirements into one easy-to-use application.</p>
                </label>
            </li>
            <li>
                <label for="img-2" style="cursor:pointer;">
                    <img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/21-64.png">
                   <a href="http://nitrodatanetworks.com/index.php/welcome/flexibity">     <h1>Flexibility</h1></a>

                    <p>VoIP systems allow end-users to carry their phone number everywhere on the planet, as long as the location has internet access.This is significantly beneficial to companies.
</p>
                </label>
            </li>
            <li>
                <label for="img-3" style="cursor:pointer;">
                    <img src=https://cdn2.iconfinder.com/data/icons/pittogrammi/142/94-64.png>
                 <a href="http://nitrodatanetworks.com/index.php/welcome/costsavings">         <h1>Cost Savings</h1></a>

                    <p>Leveraging VoIP to make international calls can translate into huge savings for end- users over traditional phone lines.Most VoIP providers offer their consumers excellent rates.</p>
                </label>
            </li>
        </ul>
    </div><div id="footer">
<h2>Nitro Data Networks Teleserv</h2>
<div id="footercontent">

<ul class="footer1">
<li>Careers</li>
<li>Contac Us</li>
<li>Locations</li>

</ul>

<ul class="footer2">
<li>Our Team</li>
<li>Where we started</li>
<li>Information</li>

</ul>

<ul class="footer3">
<li>Sitemap</li>
<li>Location Map</li>
<li>Privacy Policy</li>

</ul>


</div><!-----footer content------------------------>

</div><!-----footer------------------------------->
<div id='footercopy'>
<p>Terms of use</p>
<p>&copy 2014 Netsolutions Technologies</p>
</div>
</div>


</body>

</html>

这是CSS：

  /*Developed and designed by Chris Einar M. San Agustin*/

  html{
        background:background: background: #4c4c4c; /* Old browsers */
        background: -moz-linear-gradient(top,  #4c4c4c 0%, #000000 0%, #000000 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(0%,#000000), color-stop(0%,#000000), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */

        font-family: 'Oswald', sans-serif;

        }

        h2{
        font-size:50px;
        font-family: 'Oxygen', sans-serif;

        }

        #wrapper{
        width:1024px;
        margin-right:auto;
        margin-left:auto;
        min-height:1000px;

        }

        #header{
         width:1024px;
        margin-right:auto;
        margin-left:auto;
        position:relative;
        left:-20px;
        color:#000000;
        padding-top:50px;
        padding-bottom:10px;

        }

        #header li{
        display:inline;
        padding:20px;
        background:#FFF;
        opacity:0.5;

        }
        #header img{

        }
        #social{
           text-align:right;

          }
        #social li{
          background:#C8C8C8 ;
         position:relative;
         top:-53px;
         padding-left:10px;

          }
        #header li:hover{


          opacity:1;




          }
          #header a{
          text-decoration:none;
          color:#000000;
          }




        /*slideshow*/
          /*slider*/
          @import url(http://fonts.googleapis.com/css?family=Varela+Round);



          .slides {
          width:1024px;
          padding-right:65px;
          height:420px;
          display: block;
          position: relative;
          z-index:11;
          }

          .slides * {
              user-select: none;
              -ms-user-select: none;
              -moz-user-select: none;
              -khtml-user-select: none;
              -webkit-user-select: none;
              -webkit-touch-callout: none;
          }

          .slides input { display: none; }

          .slide-container { display: block; }

          .text{
           background-color: rgba(0, 0, 5, 0.3);
background: rgba(0, 0, 5, 0.3);
color: rgba(0, 0, 5, 0.3);
           text-align:center;
           opacity:0.8;
           font-size:50px;
           width:800px;
           color:white;
           position:relative;
           left:100px;
           margin-top:-400px;
          }
          .subtext
          {
                     background-color: rgba(0, 0, 5, 0.5);
background: rgba(0, 0, 5, 0.3);
color: rgba(0, 0, 5, 0.3);
padding:20px;
           color:white; 
           font-size:15px;
           position:relative;
           font-family: 'Dosis', sans-serif;
           text-align:left;
           left:100px;
           right:110px;
           width:500px;

          }
          .slide
          {
          top: 0;
          left:-11px;
          opacity: 0;
          margin-left:auto;
          margin-right:auto;
          width:100%;
          height:100%;
          text-align:center;
              display: block;
              position: absolute;

              transform: scale(0);
              -moz-transform: scale(0);
              -webkit-transform: scale(0);

              transition: all .7s ease-in-out;
              -moz-transition: all .7s ease-in-out;
              -webkit-transition: all .7s ease-in-out;
          }

          .slide img {
          margin-right:auto;
          width:1024px;
          margin-left:-83px;
          margin-top:-10px;
          height:110%;
          text-align:center;

          }

          .nav label {
              width: 200px;
              height:0%;
              display:none;
              position: absolute;
              margin-left:-35px;
              margin-right:110px;
              padding:auto;

              opacity: 0;
              z-index: 9;
              cursor: pointer;

              transition: opacity .2s;
              -moz-transition: opacity .2s;
              -webkit-transition: opacity .2s;

              color: #FFF;
                font-size: 150px;
              text-align: center;
              line-height: 380px;
              font-family: "Varela Round", sans-serif;
              background-color: rgba(255, 255, 255, .3);
              text-shadow: 0px 0px 15px rgb(119, 119, 119);
          }

          .slide:hover + .nav label { opacity: 0.5; }

          .nav label:hover { opacity: 1; }

          .nav .next { right: 0; }


          input:checked + .slide-container  .slide {
              opacity: 1;

              transform: scale(1);
              -moz-transform: scale(1);
              -webkit-transform: scale(1);

              transition: opacity 1s ease-in-out;
              -moz-transition: opacity 1s ease-in-out;
              -webkit-transition: opacity 1s ease-in-out;
          }

          input:checked + .slide-container .nav label { display: block; }

          .nav-dots {
              width: 960px;
              bottom: 0px;
            height: 1px;
            display: block;
            position: absolute;
            text-align:center;
          }

          .nav-dots .nav-dot {
            top: -5px;
            width: 11px;
            height: 11px;

            position: relative;
            border-radius: 100%;
            display: inline-block;
            background-color: rgba(0, 0, 0, 0.6);
          }

          .nav-dots .nav-dot:hover {
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.8);
          }

          input#img-1:checked ~ .nav-dots label#img-dot-1,
          input#img-2:checked ~ .nav-dots label#img-dot-2,
          input#img-3:checked ~ .nav-dots label#img-dot-3,
          input#img-4:checked ~ .nav-dots label#img-dot-4,
          input#img-5:checked ~ .nav-dots label#img-dot-5,
          input#img-6:checked ~ .nav-dots label#img-dot-6 {
            background: rgba(0, 0, 0, 0.8);
          }
          #nav-post{
            padding-top:30px;
            color:#FFF;
              padding:20px;
  font-family: 'Dosis', sans-serif;


            }
          #nav-post h2{
           text-align:center;



          }




          #services{
             padding-top:50px;
             padding-bottom:40px;
            color:#FCFCFC;

            }
             #services h2{
             text-align:center;

             }

          #services li{
          display:inline-block;
        padding:30px;
font-family: 'Dosis', sans-serif;

          }  

          #services li:hover{
          font-weight:bold;
          font-size:20px;

          }
          #services img{
            background:#FFF;
            border-radius:70px;
            padding:30px;
            opacity:0.5;



            }
            #services p{
              width:200PX;  
        text-align:left;
              color:#FFF;
               font-family: 'Dosis', sans-serif;



              }
            #services h1{
             padding-top:20px;
              color:#888888;
              text-align:left;

              }
              #services img:hover{
                position:relative;
                top:-20px;
                opacity:1;

                }
                #services a{
                text-decoration:none;

                }


#footer
{
 clear:both;
background: rgb(96,108,136); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(96,108,136,1) 0%, rgba(63,76,107,1) 0%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(0%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 0%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 0%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 0%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 0%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */


 margin-top:-23px;
 min-height:300px;
 margin-right:auto;
 margin-left:auto;
 text-align:center;
 overflow:hidden;
 font-family: 'Dosis', sans-serif;
 color:#FFFFFF;
}
#footer h2:hover{
text-decoration:underline;
}

#footercontent
{
width:1024px;
font-weight:20px;
margin-right:auto;
margin-left:auto;
font-family: 'Dosis', sans-serif;
text-decoration:none;
}
#footer h2{
text-decoration:none;
}
.footer1 
{
float:left;
padding-left:100px;
padding-right:150px;

}
.footer2 
{
float:left;
padding-right:150px;
}
.footer3 
{
float:left;
padding-right:150px;
}
.footer4 
{
float:left;
padding-right:100px;
}
.footer5
{
float:left;
padding-right:100px;
}

#footercopy
{
background:#404040;
text-align:center;
padding:20px;
margin-bottom:-10px;
color:white;
font-family: 'Dosis', sans-serif;
}

【问题讨论】：

不清楚你在问什么。不清楚你在问什么。不清楚你在问什么。不清楚你在问什么。
您将“旧浏览器”定义为 IE7 及更新版本？
为什么要支持IE7？只是因为你喜欢它，还是你有一个令人信服的理由这样做？如果您想使用任何数量的 CSS3 功能，您会发现尝试使一些向后兼容相当于是一种痛苦的练习。话虽如此，实际的问题是什么？还有其他方法吗？
@ChrisEinarSanAgustin 您可能想要做的是自动检测浏览器并提供不同的 HTML。但是你在维护两个不同的东西 - 一个很大的痛苦。
我们告诉你这是不可能的。为了填充所有新浏览器为旧浏览器提供 HTML5 的东西，由于各种原因，旧浏览器是不可能的，其中大多数是出于安全原因。您将永远无法以有效的方式填充位置、websocket、历史记录、音频等 API。您必须动态替换和重新创建标签，这意味着非常加载时间很慢。另外，nobody uses IE7 seriously anymore。说真的。

标签： javascript html css

【解决方案1】：

我看到您正在尝试使用Modernizr，所以首先让我说您包含它的语法是错误的。你有这个。

<script src="http://nitrodatanetworks.com/assets/modernize.js.css"/>" type="text/javascript"></script>

应该是这个（注意：文件扩展名）

<script src="http://nitrodatanetworks.com/assets/modernize.js" type="text/javascript"></script>

Modernizr 的工作原理：

当您的页面被加载时，modernizr 会运行并检测哪些“功能”可用于当前浏览器，并将特殊的类名添加到页面的 html 标记中。例如，我看到您正在使用CSS Gradients，如果您在不支持CSS Gradients 的过时浏览器上加载页面，则html 标记将类似于此<html class="no-cssgradients">。

您现在可以指定不支持 CSS Gradients 时的目标规则。

像这样：这将是您的默认类（显然供应商前缀被忽略了）

    .exampleclass {
     background: linear-gradient(to bottom, #4c4c4c 0%, #000000 0%, #000000 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
}

对于您的后备，您可以像这样使用 no-cssgradients 类。因此，当不支持 cssgradients 时，此类将应用于您的元素。

.no-cssgradients .exampleclass {
     background: #000000;
}

使用背景属性，您可以在默认标记内提供回退，但我以这种方式分隔它只是作为示例。相同的过程适用于 Modernizr 检测到的其他不受支持的元素。 modernizr 不仅仅是课程，因此我建议您前往他们的网站并开始挖掘。

编辑：我还建议通过验证器运行您的 html 和 CSS，您会发现代码中存在大量语法错误。还是祝你好运！

【讨论】：

我应该下载它还是将代码复制/粘贴到我的 Javascript 文件/文件夹中？
@ChrisEinarSanAgustin，这完全取决于你。如果您想最小化客户端必须向服务器发出的请求数量，那么将您的 javascript 保存在一个文件中是可行的方法。如果它并不重要，您可以下载它并将其作为自己的文件包含在内。