IE8顯示錯誤的一塊CSS精靈

有一百萬個關於精靈和IE8我已經在線閱讀的問題，但是，他們似乎都處理了根本沒有出現的精靈問題。我正在出現，它只是顯示了精靈的錯誤部分。它可以在所有其他瀏覽器中正常工作。IE8顯示錯誤的一塊CSS精靈

繼承人的CSS

div.searchForm input[type=text] { 
border: 0; 
padding: 0 10px; 
margin: 0; 
background: url(../img/sprite.png) 0 -125px no-repeat; 
background-size: 115% 235px; 
width: 600px; 
height: 30px; 
float: left; 
font-size: 12px; 
color: #fff; 
-webkit-appearance: none; 
-webkit-border-radius: 0; 
}

和HTML：

<section id="secondary6"> 
    <h1 class="hidden">Search</h1> 
    <div class="clearfix"> 
     <div class="grid_4"> 
      <nav class="grid_2 secondary"> 
       <h1 class="hidden">Search Secondary Navigation</h1> 
      </nav> 
      <div class="searchForm"> 
       <input type="text" placeholder="search"> 
       <input type="button"> 
       <input type="submit" class="hidden" > 
      </div> 
     </div> 
    </div> 
</section>

基本上你點擊搜索按鈕，並顯示應否則隱藏搜索欄。就像我說的那樣，它可以在其他瀏覽器中使用

來源

2013-07-09 Paidenwaffle

IE8不支持背景大小（請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility），所以這就是你必須解決的問題。根據您的需要，您可以嘗試使用IE7.js（可與其他版本的IE一起使用）或條件註釋來調整IE8圖像的位置。或者，只要確保您的原始圖像不需要重新調整大小。

來源

2013-07-09 21:11:29 KatieK

是的，你說得對！它並沒有解決問題，但刪除該行在其他瀏覽器中也顯示了精靈的錯誤部分。謝謝！ – Paidenwaffle

將類或ID分配給特定的文本輸入字段時會發生什麼？

例如..

div.searchForm input.classInput { 
    /* css code here */ 
}

也...

..where是元素表單標籤包裝，表單名稱，表單動作？

輸入的字段不應該駐留在你的方式呈現..不形標籤的文檔中..

哪些軟件實際上爲您生成的代碼？它是Dreamweaver嗎？

有效的HTML輸入表單的基礎和正確的例子..

<form id="formID" name="formName" method="post" action="#"> 
<input type="text" name="textUno" value="" /> 
<input type="text" name="textDue" value="" /> 
<button type="submit" name="do_processing"> Go! </button> 
</form>

來源

2013-07-09 21:11:44 Spooky

這就是我從Chrome的「檢查元素」和「查看源代碼」中快速拉下來的東西 – Paidenwaffle

IE8顯示錯誤的一塊CSS精靈

回答

相關問題