在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中不工作的按鈕

回答

相關問題