Question

我创建了这个网站; smartwasher.nl和添加的按钮，可以在我拥有的每个浏览器上正常工作（除了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>

我很困惑，真的没有得到导致错误的原因。我希望有人可以帮助我，谢谢你。

Answer 1

正因为如此：

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

所以删除它，它按预期工作。

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

你也可以稍微加强你的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，而是将它应用于两个类。

按钮无法在IE中工作

1 个答案: