-1

このウェブサイトを作成しました。smartwasher.nl と追加されたボタンは、私が持っているすべてのブラウザー (IE を除くすべて) で正常に動作しますが、クライアントはボタンの 1 つが機能しないと言います。理由がわかりません。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 に答える