분명 그 일을 달성하기 위해 CSS의 HTML 요소 (차례)

HTTP : //dancewithnet.com/2009/09/06/css-opacity/에서 재판

초안 CSS3 정의 {opacity:<length> | inherit;}가장 현대적인 브라우저에서 지원 된 투명성의 요소를 선언하지만, IE는 초기 특정 사유 재산입니다 filter달성하기 위해, 그래서 HTML 요소의 투명도 이미 유비쿼터스. 첫째, 한 번 봐 걸릴 A-수준의 브라우저 가 지원하는 프로그램의 투명 요소를 달성하기 위해 CSS를 :

브라우저	최소 버전	계획
인터넷 익스플로러	4.0	`filter: alpha(opacity=xx);`
	5.5	`filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx);`
	8.0	`filter: "alpha(opacity=xx)"; filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=xx)"; -ms-filter: "alpha(opacity=xx)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";`
파이어 폭스 (게코)	0.9 (1.7)	`opacity`
오페라	9.0	`opacity`
사파리 (웹킷)	1.2 (125)	`opacity`

실제로 IE8에서, 별칭 필터, 둘 개 사이의 차이 필터 - -ms 모노 나 큰 따옴표로 묶어야합니다 조디악 값 -ms 필터 , 필터가 필요하지 않고, IE8 이전 버전, 필터 속성 값은 모노 또는 큰 따옴표를 둘러싸는 안된다.

HTML 요소가 투명성을 달성하기 위해, 즉이 레이아웃이 있어야합니다, 이러한 요소는 읽기 전용 속성 한 hasLayout의를 , 그 값은 true입니다. 세부 사항은 다음과 같습니다 :

body, img, table, tr, th, td그리고 다른 요소가 hasLayout있다 true.
type으로 text, button, file또는 select의 inputa는 hasLayout있다 true.
설정 {position:absolute}요소 hasLayout에 대한true
설정 {float:left|right}요소 hasLayout에 대한true
설정 {display:inline-block}요소 hasLayout에 대한true
설정 {height:xx}또는 {width:xx}요소는 다음과 같은 두 가지 특정 조건 중 하나는해야 hasLayout능력 true:
1. 표준에서 (엄격) 모드 IE8 호환성 모드와 IE8 이전 브라우저, display값이 block같은 demo3는 할 수 없습니다.
2. 요소 쿼크 모드 (의 compat 모드).
설정 {zoom:xx}IE8의 호환성 모드 또는 IE8 브라우저의 요소는 이전 hasLayout입니다 true만, 표준 모드에서 IE8은 트리거되지 않습니다 hasLayout.
설정 {writing-mode:tb-rl}요소 hasLayout입니다 true.
요소 contentEditable속성 값 true.
IE8 표준 모드에서 설정 {display:block}요소가 hasLayout되었습니다 true로, demo8 .

자세한 내용은 hasLayout을 볼 수 있습니다 인터넷 익스플로러 "hasLayout의"개요 탐색 과 가진 레이아웃에

위의이 이전 버전과의 호환성을 자신의 개인 재산에 대한 너무 혼란 투명 HTML 요소에 대한 IE를 보이고 IE 투명 요소의 실현을 허용 할 수 있습니다에서 다음과 같은 다양한 방법이 인스턴스를 demo8하는 CSS의 불투명도 데모 1을 있지만, IE 팀은 달성하기 위해 권장 투명한 방식이 있다 :

{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: .5;
}

현재 구현은 간단 사용하는 것이 가장 좋습니다 이런 demo4에 CSS 불투명도로 :

{
    filter:alpha(opacity=30);
    opacity:.3;
}

사실 가장 인기있는 자바 스크립트 프레임 워크 세트 스타일의 방법은이 방법으로 적용되며, IE 설정을 위해 {zoom:1}요소를 허용하기 hasLayout로를 true하지만, 표준 모드에서 IE8입니다 zoom트리거하지 hasLayout그래서 그들을 설정되어 사용 hasLayout하는 false요소를 투명 표준 모드에서 IE8은 실패에서이 버그 YUI는(나는 이미 YUI 팀이 버그를 제출, 그들이에있을 것입니다 다음 버전의 수정 , 2.8.0 최신은 2.9.0 그것을 기대하고, 아직 거기), 프로토 타입 , jQuery를 하고 Mootools의 존재의 최신 버전은, 특정 IE8 표준 모드에서 찾아보세요 demo11에 demo9 . 또한 IE8에서 다양한 방법의 투명성, 그래서 자바 스크립트의 사용은 HTML 요소에 대한 투명도 값을 얻을 수 있기 때문에 다양한 상황,이 문제에 대한 YUI 완벽한 솔루션을 고려할 필요가있다, 프로토 타입 약간의 사려 깊은 jQuery를보다 더 작은, 그리고 Mootools의 직접입니다 버그 특히, 에 IE에서 데모 1 demo8 참조 프레젠테이션을. 순위 워드에 의해 프레임 (4)이 점에서, 제 YUI, 원형 둘째, 셋째의 jQuery, Mootools의 바닥.

나는 간단하게 실현 설정 및 기능 불투명도, 당신은 위의 프레임 워크 버그의 존재를 피할 수 있습니다 얻을, 제발 IE8 표준 모드에서 demo12 참조 :

//이 문제를 해결하는 상기 CSS 불투명도 속성 기능을 설정 IE8의 
VAR의 setOpacity = 함수 (EL, I) {
   IF (window.getComputedStyle) { // 않은 IE들에 대한 
    el.style.opacity = I; 
  } 다른  IF (문헌. documentElement.currentStyle) { // IE들에 대한 
    IF (! el.currentStyle.hasLayout) { 
      el.style.zoom = 1.는 ; 
    } 
    IF ! (el.currentStyle.hasLayout는) { // IE8 크게 효과적 아니라, 다시 설정된 블록 인라인 
      el.style.display = '인라인 블록' ; 
    } 
    은 try {
       // 기존 필터 여부를 테스트
      // http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx 
      IF (el.filters) {
         IF (el.filters ( '알파' )) { 
      el.filters ( '알파') = 100 * 불투명도 I. ; 
    } 다른 { 
      el.style.filter + = '알파 (불투명도 ='* + I + 100 ')' ; 
     } 
       } 
    } 캐치 (E) { 
      el.style.filter = '알파 (불투명도 ='* + I + 100 ')' ; 
    } 
  } 
} 

// 함수 CSS 불투명도 속성 값을 얻을 
// http://developer.yahoel.com/yui/docs/YAHOO.util.Dom 차용 # method_getStyle .html 중에서 
VARgetOpacity = 함수 (EL) {
   VAR의 값;
  경우 (window.getComputedStyle) { 
    값 = el.style.opacity;
    만약 (!의 값) { 
      값 = el.ownerDocument.defaultView.getComputedStyle (EL, 널 ) "불투명" ]; 
    } 
    리턴 값; 
  } 다른  경우 (document.documentElement.currentStyle) { 
    값 = 100 ;
    시도 { // 오류가 발생하지 경우 더 DXImageTransform의 
        값 = el.filters [ 'DXImageTransform.Microsoft.Alpha'  ] .opacity;
    } 캐치(e)는 {
         시도 { // 그 문서에서 확인 
            값 = el.filters ( '알파' ) .opacity; 
        } 캐치 (ERR) { 
        } 
    } 
    리턴 값 / 100 ; 
  } 
}

HTTPS : //www.cnblogs.com/JoannaQ/archive/2013/02/11/2909953.html 재현

분명 그 일을 달성하기 위해 CSS의 HTML 요소 (차례)

추천