CSS3不是在谷歌瀏覽器正常工作

做的CSS任何更改都將直接反映在按鈕上，但是當我嘗試了這種代碼正常的網頁，我沒有看到任何在任何瀏覽器上更改，甚至不包括IE10。

我該怎麼辦？

這是我想在我的系統代碼：

<!DOCTYPE html> 
<html> 
<body> 
    <script type="text/css"> 
     input.gray, a.gray, input[type=submit].gray { 
      padding: 10px 10px; 
      -webkit-border-radius: 2px 2px; 
      border: solid 1px #dadada; 
      background: #f4f4f4; /* Old browsers */ 
      background: -moz-linear-gradient(top, #f4f4f4 0%, #f1f1f1 100%); /* FF3.6+ */ 
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */ 
      background: -webkit-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */ 
      background: -o-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* Opera 11.10+ */ 
      background: -ms-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* IE10+ */ 
      background: linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* W3C */ 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#f1f1f1',GradientType=0); /* IE6-9 */ 
      color: #555; 
      text-decoration: none; 
      cursor: pointer; 
      display: inline-block; 
      text-align: center; 
      font-weight:bold; 
      font-family:Arial, Helvetica, sans-serif; 
      text-shadow: 0px 1px 1px rgba(255,255,255,1); 
      line-height: 1; 
      font-size:11px; 
     } 

     .gray:hover { 
      border:1px solid #c6c6c4; 
      background: background: #f8f8f8; /* Old browsers */ 
      background: -moz-linear-gradient(top, #f8f8f8 0%, #f1f1f1 100%); /* FF3.6+ */ 
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */ 
      background: -webkit-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */ 
      background: -o-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* Opera 11.10+ */ 
      background: -ms-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* IE10+ */ 
      background: linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* W3C */ 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f1f1f1',GradientType=0); /* IE6-9 */ 
      color: #222; 
      -webkit-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4); 
      -moz-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4); 
      box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4); 
     } 

     .gray:active { 
      border:1px solid #c6c6c4; 
      color: #222; 
      -webkit-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee; 
      -moz-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee; 
      box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee; 
     } 
    </script> 

    <br><br><br><br> 

    <center> 
     <form> 
      <input type="button" value=" Show  " class="gray"/> 
     </form> 
    </center> 
</body> 
</html>

來源

2013-04-17 Animesh Pandey

您發佈的代碼正在工作，我試過在我的本地機器上，並按預期工作。我無法確定你到底有什麼問題，請問你能否提供更多信息？ – Arkana

@Arkana我編輯了這個問題......我提供了我一直在嘗試的代碼！ –

不要把CSS在script標籤。 CSS應該位於head標記中，並且需要位於style標記中，例如<style type="text/css"></style>。

來源

2013-04-17 10:23:46 dersvenhesse

哦！你是對的！我的錯誤...謝謝 –

好吧，我看看......你必須把所有的CSS，因爲這：標籤在你的HTML

<head> 
    <!-- Here goes meta tags, title and other stuff --> 
    <style type="text/css"> 
       input.gray, a.gray, input[type=submit].gray { 
        padding: 10px 10px; 
        -webkit-border-radius: 2px 2px; 
        border: solid 1px #dadada; 
        background: #f4f4f4; /* Old browsers */ 
        background: -moz-linear-gradient(top, #f4f4f4 0%, #f1f1f1 100%); /* FF3.6+ */ 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */ 
        background: -webkit-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */ 
        background: -o-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* Opera 11.10+ */ 
        background: -ms-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* IE10+ */ 
        background: linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* W3C */ 
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#f1f1f1',GradientType=0); /* IE6-9 */ 
        color: #555; 
        text-decoration: none; 
        cursor: pointer; 
        display: inline-block; 
        text-align: center; 
        font-weight:bold; 
        font-family:Arial, Helvetica, sans-serif; 
        text-shadow: 0px 1px 1px rgba(255,255,255,1); 
        line-height: 1; 
        font-size:11px; 
       } 

       .gray:hover { 
        border:1px solid #c6c6c4; 
        background: background: #f8f8f8; /* Old browsers */ 
        background: -moz-linear-gradient(top, #f8f8f8 0%, #f1f1f1 100%); /* FF3.6+ */ 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */ 
        background: -webkit-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */ 
        background: -o-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* Opera 11.10+ */ 
        background: -ms-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* IE10+ */ 
        background: linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* W3C */ 
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f1f1f1',GradientType=0); /* IE6-9 */ 
        color: #222; 
        -webkit-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4); 
        -moz-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4); 
        box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4); 
       } 

       .gray:active { 
        border:1px solid #c6c6c4; 
        color: #222; 
        -webkit-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee; 
        -moz-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee; 
        box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee; 
       } 
     </style> 
    <!--other content in head--> 
    </head>

就是這樣，<head>之間（身體前）和成<style>標籤（不是腳本）。

希望它有幫助;）

來源

2013-04-17 10:24:05 Arkana

CSS3不是在谷歌瀏覽器正常工作

回答

相關問題