在IE中不工作的按钮

-1

我制作了这个网站; smartwasher.nl和添加的按钮，这些按钮在我拥有的每个浏览器上都能正常工作（除IE之外，这些都是它们），但客户端说其中一个按钮不起作用。我不明白为什么，我无法正确测试它，因为我没有IE。在IE中不工作的按钮

这是HTML;

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta name="description" content="Biologisch reinigen met minimaal verbruik: de Smartwasher. Bestel de Smartwasher nu bij ons. De unieke Bio Remediation Technologie zorgt ervoor dat enzymen de koolwaterstoffen abreken tot CO2. "> 
     <title>Smartwasher</title> 
     <link rel="stylesheet" href="reset.css" media="screen"> 
     <link rel="stylesheet" href="style.css" media="screen"> 
    </head> 
<body> 

<div id="wrapper"> 
    <div class="header"> 
     <div class="nav"> 
      <ul> 
       <li><a href="index.html" class="active">Home</a></li> 
       <li><a href="info.html">Informatie</a></li> 
       <li><a href="contact.html">Contact</a></li> 
      </ul> 
     </div> 
    </div> 

    <div class="content"> 
     <div class="caption"> 
     <h1>Biologisch reinigen met minimaal verbruik: de Smartwasher</h1> 
     <p> De traditionele onderdelenreinigers maken gebruik van agressieve, vluchtige solventgedragen reinigingsvloeistoffen om olie en vet van onderdelen te verwijderen. Deze chemicaliën leiden soms tot moeilijkheden op het vlak van gezondheid, veiligheid en milieu. 

Om dit op te lossen introduceren we de “milieuvriendelijke SmartWasher”.</p> 
     </div> 
     <div class="image"> 
      <img src="pics02.jpg"> 
      <a href="contact.html" class="boxbutton2">Nu bestellen!</a> 
     </div> 
    </div>

而这就是与之配合的CSS;

body { 
    background-image:url('bg.png'); 
    width:100%; 
    border-top:10px solid black; 
    margin:0px; 
    font-size:100%; 
    font-family:helvetica; 
} 

a { 
    color:#fff; 
    text-decoration:none; 
} 

a:hover{ 
    color:#d1d1d1; 
} 

.active { 
    color:#d1d1d1; 
} 

#wrapper { 
    width:100%; 
    margin:0px; 
    top:0px; 
} 

img { 
    max-width: 100%; 
    height: auto; 
} 

.header { 
    width:100%; 
    background-color:#28518d; 
    height:60px; 
    margin:0px; 
    -moz-box-shadow: 0 0 5px #888; 
-webkit-box-shadow: 0 0 5px#888; 
box-shadow: 0 0 5px #888; 
} 

.nav { 
    margin: 0px auto; 
    color:#fff; 
} 

.nav ul { 
    list-style-type: none; 
    margin: 0px auto; 
    text-align: center; 
    padding-top:1.2em; 
} 

.nav ul li { 
    display: inline; 
    margin: 0px auto; 
    font-size:1.4em; 
    padding-right:2.0em; 
} 

.nav ul li:last-child { 
    padding-right:0em; 
} 

.content { 
    margin: 0px auto; 
    width:900px; 
    background-color:white; 
    margin-top:4em; 
    height:26em; 
    border-radius: 15px; 
    -moz-box-shadow: 0 0 5px #888; 
-webkit-box-shadow: 0 0 5px#888; 
box-shadow: 0 0 5px #888; 
} 

.caption { 
    width:30%; 
    margin:0px; 
    color:#515151; 
    padding:2.1em; 
    padding-right:0; 
    float:left; 
    font-size:100%; 
    overflow:hidden; 
} 

.caption p { 
    font-size:1em; 
    line-height:1.3em; 
} 

.caption h1 { 
    font-size:1.2em; 
    color:#28518d; 
    margin-bottom:1em; 
} 

.image { 
    display:inline; 
    margin:0px; 
    margin-top:3em; 
    float:right; 
    display:block; 
    width: 58%; 
} 

.image img { 
     max-width:100% !important; 
    max-height:100% !important; 
    display:block; 
    margin: 0px auto; 
} 

.box { 
    width:180px; 
    display:block; 
    margin: 2em; 
    float:left; 
} 

.box h1{ 
    font-size:1.2em; 
    color:#28518d; 
    margin-bottom:1em; 
} 

.box p{ 
    font-size:1em; 
    line-height:1.3em; 
    margin-bottom:1em; 
} 

.boxholder { 
    margin-left:3em; 
    padding-top:3em; 
} 

.footer { 
    margin-top:4em; 
    height:60px; 
    background-color:#28518d; 
    -moz-box-shadow: 0 0 5px #888; 
-webkit-box-shadow: 0 0 5px#888; 
box-shadow: 0 0 5px #888; 
border-bottom:10px solid black; 
} 

.thanks { 
    margin-top:4em; 
    height:60px; 
    background-color:#28518d; 
    -moz-box-shadow: 0 0 5px #888; 
-webkit-box-shadow: 0 0 5px#888; 
box-shadow: 0 0 5px #888; 
border-bottom:10px solid black; 
    position:absolute; 
    bottom:0; 
    width:100%; 
} 

.footer p { 
    text-align:right; 
    padding-right:2em; 
    padding-top:1.5em; 
    font-size:0.9em; 
} 

.boxbutton2 { 
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    box-shadow:inset 0px 1px 0px 0px #ffffff; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); 
    background:-moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); 
    background-color:#ededed; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    border:1px solid #dcdcdc; 
    display:inline-block; 
    color:#28518d; 
    font-family:arial; 
    font-size:15px; 
    font-weight:bold; 
    padding:6px 24px; 
    text-decoration:none; 
    text-shadow:1px 1px 0px #ffffff; 
    margin:4em; 
    z-index:999; 
    position:absolute; 
    top:28em; 

}.boxbutton2:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed)); 
    background:-moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); 
    background-color:#dfdfdf; 
    color:#485d7c; 
}.boxbutton2:active { 
    position:relative; 
    top:1px; 
} 

.boxbutton { 
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    box-shadow:inset 0px 1px 0px 0px #ffffff; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); 
    background:-moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); 
    background-color:#ededed; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    border:1px solid #dcdcdc; 
    display:inline-block; 
    color:#28518d; 
    font-family:arial; 
    font-size:15px; 
    font-weight:bold; 
    padding:6px 24px; 
    text-decoration:none; 
    text-shadow:1px 1px 0px #ffffff; 


}.boxbutton:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed)); 
    background:-moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); 
    background-color:#dfdfdf; 
}.boxbutton:active { 
    position:relative; 
    top:1px; 
} 


.contact h1 { 
    font-size: 35px; color: #445668; text-transform: uppercase; 
    text-align: center; text-shadow: 0px 1px 0px #f2f2f2; 
} 

label { 
    width: 95px;font-size: 16px; color: #445668; 
    text-align:left; 
    text-transform: uppercase; text-shadow: 0px 1px 0px #f2f2f2; 
    padding-left:4em; 
} 

input { 
    width: 50%; height: 35px; padding: 5px 20px 0px 20px; 
    background: #28518d; 
    background: -moz-linear-gradient(top, #28518d 0%, #28518d 20%); /* firefox */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28518d), color-stop(20%,#28518d)); /* webkit */ 
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
    -moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2; 
    font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71; 
} 
    input::-webkit-input-placeholder { 
     color: #a1b2c3; text-shadow: 0px -1px 0px #38506b; 
    } 
    input:-moz-placeholder { 
     color: #a1b2c3; text-shadow: 0px -1px 0px #38506b; 
    } 

textarea { 
    width: 50%; height: 170px; padding: 12px 20px 0px 20px; margin: 0 0 20px 0; 
    background: #28518d; 
    background: -moz-linear-gradient(top, #28518d 0%, #28518d 20%); /* firefox */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28518d), color-stop(20%,#28518d)); /* webkit */ 
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
    -moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2; 
    font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71; 
} 
    textarea::-webkit-input-placeholder { 
     color: #a1b2c3; text-shadow: 0px -1px 0px #38506b; 
    } 
    textarea:-moz-placeholder { 
     color: #a1b2c3; text-shadow: 0px -1px 0px #38506b; 
    } 


input[type=submit] { 
    width: 30%; height: 52px; padding: 10px 15px; margin: 0 4em 3em 0; 
    -moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999; 
    border: 1px solid #28518d; 
    background: -moz-linear-gradient(top, #4270b4 0%, #28518d 100%); /* firefox */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4270b4), color-stop(100%,#28518d)); /* webkit */ 
    cursor: pointer; 
} 

fieldset { 
    border:none; 
} 

.contact { 
    margin: 0px auto; 
    width:60%; 
    background-color:white; 
    margin-top:4em; 
    height:auto; 
    border-radius: 15px; 
    -moz-box-shadow: 0 0 5px #888; 
-webkit-box-shadow: 0 0 5px#888; 
box-shadow: 0 0 5px #888; 
padding-left:4em; 
padding-top:2em; 

} 

.center { 
    text-align:center; 
    padding-bottom:3em; 
} 

.email { 
    margin: 0px auto; 
    width:100%; 
}

在索引我也有另一套按钮和客户说他们的工作，而我认为他们是完全一样的按钮;

<div class="content"> 
    <div class="boxholder"> 
     <div class="box"> 
      <h1>Huidvriendelijk</h1> 
      <p>De Smartwasher gebruikt alleen pH-neutrale vloeistoffen, aanraking met de huid is dus geen probleem.</p> 
      <a href="info.html" class="boxbutton">Meer informatie</a> 
     </div> 
     <div class="box"> 
      <h1>Geen schadelijke dampen</h1> 
      <p>De Smartwasher stoot geen Solventen uit, uw werknemers staan dus nooit in schadelijke dampen. Het gebruik van mondkapjes is niet nodig.</p> 
      <a href="info.html" class="boxbutton">Meer informatie</a> 
     </div> 
     <div class="box"> 
      <h1>Niet brandbaar</h1> 
      <p>De Smartwasher maakt geen gebruik van brandbare vloeistoffen. Dit is niet alleen veiliger maar zorgt ook voor een vereenvoudigde wetgeving.</p> 
      <a href="info.html" class="boxbutton">Meer informatie</a> 
     </div> 
    </div> 
    </div> 

    <div class="footer"> 
     <p>&copy;2013 Van Rheenen Haarlem, 
Groothandel voor automotive en industrie. Importeur voor de automotive branche in Nederland.<br> Prijzen genoemd op de website zijn exclusief btw.</p> 
    </div> 
</div>

我很困惑，真的不明白是什么导致了错误。我希望有人能帮助我，谢谢。

来源

2013-05-08 Jane

哪个“按钮”不起作用？你的意思是什么“不起作用”？哪个版本的IE？ – 2013-05-08 12:10:56

无法在IE7上使用'filter：progid：DXImageTransform.Microsoft.gradient'，可能会导致客户端看到一些随机的东西 – RelevantUsername 2013-05-08 12:11:42

使用BrowserStack在IE中测试您的网页，如果您使用它可以免费使用30分钟和3个月利用modern.ie优惠 – Galen 2013-05-08 12:14:50

这是因为这一点：

.boxbutton2:active { 
    position:relative; 
    top:1px; 
}

所以删除它，和它的作品如预期。

该规则导致您的链接跳转，所以我的假设是当它干扰IE处理链接的方式。

你也可以neaten你的CSS一点点，就像这样：

.footer,.thanks { 
    margin-top:4em; 
    height:60px; 
    background-color:#28518d; 
    -moz-box-shadow: 0 0 5px #888; 
    -webkit-box-shadow: 0 0 5px#888; 
    box-shadow: 0 0 5px #888; 
    border-bottom:10px solid black; 
} 

.thanks { 
    position:absolute; 
    bottom:0; 
    width:100%; 
}

也：

.boxbutton,.boxbutton2 { 
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    box-shadow:inset 0px 1px 0px 0px #ffffff; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); 
    background:-moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); 
    background-color:#ededed; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    border:1px solid #dcdcdc; 
    display:inline-block; 
    color:#28518d; 
    font-family:arial; 
    font-size:15px; 
    font-weight:bold; 
    padding:6px 24px; 
    text-decoration:none; 
    text-shadow:1px 1px 0px #ffffff; 
} 
.boxbutton:hover,.boxbutton2:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed)); 
    background:-moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); 
    background-color:#dfdfdf; 
} 
.boxbutton:active { 
    position:relative; 
    top:1px; 
} 

.boxbutton2 { 
    margin:4em; 
    z-index:999; 
    position:absolute; 
    top:28em; 
}

因此不是重复你把它应用到这两个类的CSS。

来源

2013-05-08 12:15:04

谢谢你的明确答案，这解决了它，并感谢你对我的CSS提示！ – Jane 2013-05-08 12:22:30

在IE中不工作的按钮

回答

相关问题