2010-05-07 2 views
18

IE에 문제가 있습니까? (다른 내용은 무엇입니까?) :"투명"색이 작동하지 않습니다.

배경 이미지가있는 CSS로 콘텐츠를 생성합니다. 내가 그 다음과 같습니다

#nav ul li:after { 
    content: "--"; 
    position: relative; 
    z-index: 99; 
    background: transparent url(image.png); 
    color: transparent; 
} 

텍스트 색이 투명 비 IE-브라우저에 있지만 모든 IE 브라우저 (IE6-IE8)에 검은 색이고 당신이 그것을 볼 수 있었다. 어떻게 텍스트를 투명하게 보이게 할 수 있습니까?

나는 이미 시도했다 : visibility - opacity - filter - text-indent ... 하지만 아무도 그 일을 제대로하지 못했다. (내가 필요한 배경으로) 또는 속성이 적용되지 않는다.

+1

어떤 IE 버전입니까? 명확히하기 위해 검은 색 '-'이 있는데 그것은 당신이 원하지 않는 것입니다. 맞습니까?검은 색 배경이있는 것은 아닙니다. –

+0

예. IE-Version : 위를보십시오 – Poru

답변

5

알았어 : 올바른 패딩과 글꼴 크기가 0입니다! 패딩 왼쪽 값을 이미지 너비보다 한 픽셀 씩 설정합니다.

+1

자세한 내용을 보려면이 대답을 펼치십시오. –

+0

온라인 프로젝트가 없지만이 변경된 CSS를 발견했습니다 :'#nav li : after {content : "."; "; 패딩 : 5px 0px 3px 0px; 색깔 : 투명; 배경 : 투명 URL (bg-nav.png) 반복 없음 0px 0px; 위치 : 상대적; z- 색인 : 1; }' – Poru

0

IE는 li:after을 일관되게 지원하지 않습니다. 어느 IE에 대해 이야기하고 있습니까? IE6? IE7? 양자 모두?

+0

IE6에서 IE8까지 – Poru

-1

배경 이미지로 PNG를 사용하고 있습니다. 일반적으로 IE 6을 사용하는 경우 PNG 투명도 (http://www.twinhelix.com/css/iepngfix/)에 대한 수정 프로그램이 있습니다. 그렇더라도 이것은 배경 이미지로는 작동하지 않습니다. 따라서 IE 6을 사용하고 있다면 실제로 문제가 없습니다.

+0

나는 그를 올바르게 이해한다면 그는 배경이 아닌 작동하지 않는'color : transparent'에 대해 이야기하고 있습니다. –

+3

@ 페카 : 그래, 나도 그렇게 생각했는데 BG를 투명하게하려면 배경에 이미지가있는 이유는 무엇입니까? "color"속성을 투명하게 설정해야하는 이유는 무엇입니까? 그건 말이 안돼. 그리고 컨테이너는 기본적으로 투명합니다. 여기에는 많은 연결이 끊어져 있습니다. – Robusto

+1

이 질문은 오래된 질문인데, OP가 투명 PNG를 사용하는 곳은 어디입니까? –

1

나는 IE 지원 버전이 없다고 생각한다. color: transparent 아마도 jQuery 같은 것을 시도해 볼 수있다.

1

나는이 문제를 이미 해결했다고 가정하지만, 최근에는 매우 큰 선 높이를 사용했습니다. 텍스트를 들여 쓰면 레이아웃 문제가 생기고 overflow : hidden을 사용하면 텍스트를 숨길 수 있습니다. 라인 높이

line-height:0;

사용에 대한 내 경우 일 것

7

.

+0

굉장한 나를 위해 일했습니다. 건배. –

+0

이전 답변이지만 환상적입니다! – MHibbin

42

무엇을 당신이하려는 것은 배경으로 이미지를 표시하고 텍스트를 사용

작동

font-size:0px

표시되지 않는 경우! 이 Internet Explorer에서 작동하지 않는 경우

+0

이 간단한 대답에 감사드립니다. 기본 코드에 대한 액세스 권한이없는 원치 않는 버튼 값을 숨기려고 시도했는데 이것이 효과가있었습니다. – matt

+0

OMG이 때문에 방금 노트북을 창밖으로 던지지 않을 수있었습니다. 감사합니다.] – Brade

+1

이것은 접근성 문제를 일으키며 일부 구형 브라우저에서는 작은 줄의 텍스트를 보여줍니다. 자세한 정보는 CSS 트릭 이미지 대체 갤러리를 참조하십시오. – RobW

4

8

font-size: 0; 

은 유효한 문서 타입을 사용하고 있는지 확인 :

<!DOCTYPE html> 
2

이 작동합니다. 나 컬러를 블록이나 인라인 블록

.transparent { 
    text-indent: 100%; 
    overflow: hidden; 
    white-space: nowrap; 
} 
+0

본문 오버플로를 자동으로 설정했습니다. 이 문제로 인해 색상 렌더링 문제가 발생했습니다. 크롬의 각진 요소가 투명합니다. 다시 표시되도록 설정 (기본 오버플로 설정)하면 문제가 해결되었습니다. – Soggiorno

0

:이 표시를 추가하지 않을 경우 투명 IE8에서 작동하지 않는, 그것은 기본 색상으로 텍스트를 표시했다. 나는 가시성을 사용했다 : 숨겨진; 텍스트가 표시 될 필요가 없기 때문에 IE8에만 해당됩니다.

요소를 표시 할 필요가없는 경우이 도움말을 참조하십시오.