2013-07-09 1 views
3

스프라이트에 대해 100 만 가지 문제가 있으며 온라인에서 읽은 IE8이 있지만 스프라이트가 전혀 나타나지 않는 문제가 있습니다. 내 모습이 나타나고 있는데, 잘못된 것만 보입니다. 그것은 다른 모든 브라우저에서 잘 작동합니다.IE8이 CSS 스프라이트의 틀린 부분을 표시합니다.

을 heres 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> 

은 기본적으로 당신은 검색 버튼을 클릭하고, 그렇지 않으면 숨겨져 야 검색 표시 줄을 표시합니다. 내가 말했듯이 다른 브라우저에서도 작동합니다.

답변

3

IE8은 배경 크기 (https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility 참조)를 지원하지 않으므로이를 해결해야합니다. 필요에 따라 IE7.js (다른 버전의 IE에서 작동) 또는 조건부 주석을 사용하여 IE8의 이미지 위치를 조정할 수 있습니다. 또는 원본 이미지의 크기를 조정할 필요가 없도록하십시오.

+0

당신은 바로 네이야! 잘 문제를 해결하지 못했지만 그 행을 제거하면 다른 브라우저에서도 스프라이트의 잘못된 부분이 표시됩니다. 감사! – Paidenwaffle

1

특정 텍스트 입력 필드에 클래스 또는 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> 
+0

크롬에서 '조사 요소'및 '소스보기'에서 빠르게 벗어났습니다. – Paidenwaffle