-1

我制作了这个网站；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>

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

4

1 回答 1

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，而是将其应用于两个类。

于 2013-05-08T12:15:04.150 回答