我想将我的设计与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">‹</label>
<label for="img-2" class="next">›</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">‹</label>
<label for="img-3" class="next">›</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">‹</label>
<label for="img-4" class="next">›</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">‹</label>
<label for="img-5" class="next">›</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">‹</label>
<label for="img-6" class="next">›</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">‹</label>
<label for="img-1" class="next">›</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>© 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;
}
答案 0 :(得分：2)
我看到你正在尝试使用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;
}
使用background属性，您可以在默认标记内提供回退，但我将其作为示例以这种方式分隔。同样的过程适用于Modernizr检测到的其他不受支持的元素。现代化不仅仅是课程，所以我建议前往他们的网站并开始挖掘。
编辑：我还建议运行你的html＆amp;通过验证器的CSS，你会发现你的代码中有很多语法错误。非常好运！