2011-06-14 5 views
2

통계 텍스트가 인쇄 된 이미지가 있습니다. 이것은 FF, 크롬 및 IE9에서는 잘 작동했지만 IE8에서는 제대로 작동하지 않았습니다. 나는 여기서 문제가 무엇인지 알아낼 수 없다.CSS : Image over Image - IE8 문제

HTML :

    <div> 
        <div class="image"> 

         <img src="@Url.Content("~/stuff/stuffImage.png")" alt="" /> 

         <GIR1><span>@ViewBag.stuffArray[4]%</span></GIR1> 

        </div> 
        </div> 

CSS :

.image { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
} 

GIR1 { 
    position: absolute; 
    top: 110px; 
    left: 50px; 
    width: 100%; 

} 

GIR1 span{ 
    color: white; 
    font: bold 15px/15px Helvetica, Sans-Serif; 
    letter-spacing: -1px; 
    padding: 10px; 

} 

대신 그림 안의 텍스트를 배치의. 일반 텍스트처럼 외부에 배치합니다. 무엇이 문제를 일으킬 수 있습니까? enter image description here

답변

4

사용자 정의 요소 <GIR1>을 사용하는 것이 합리적이라고 확신합니다.

아래의 IE는 알 수없는 요소를 기본적으로 인식하지 않습니다.

당신은 (쉬운 선택은 여기에있을 것이다) <div class="GIR1">로 전환, 또는 할 수 있습니다 :

을 당신은 자바 스크립트를 수정 사용할 수 있습니다 사용자 정의 요소를 추가해야합니다 http://code.google.com/p/html5shiv/

주 직접 스크립트에.

압축되지 않은 버전은 다음을 참조하십시오 http://www.iecss.com/print-protector/

var elems = 'abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video' 

당신은 그 목록에 사용자 지정 요소를 추가해야합니다.

+1

+1 동의 함 - HTML 문서 내에서 자신의 요소 이름을 구성하는 것이 바람직하지 않음. 그것이 바로 수업입니다. – Spudley

+0

나는 그것을 자바 스크립트 방식으로했는데 문제가 해결되었습니다. 도와 줘서 고마워. – Esa