IT를 표현

당신이 IE8에서 해당 페이지를 볼 경우, 다음이 게시물은 뒤에 완전한 불투명 흰색 배경을 볼 수 있어야합니다. 나는 변화 천천히, 그리고 꾸준히 적응 그런 사람 중의 한 명이다으로 어제, 내 collegue 나를 (에게이 상황을 지적 ... 특히 브라우저.라고 임 겁쟁이지만, 그래서 .... UI 개발자이기 때문에 더 좋을 텐데, 나는 늘 개똥이 새 브라우저 버전을 무서워 ... 당신에 대해 tlaking 인스턴트 메시지 알아, 맞지?)

어떻게 그것을 해결할 수있는 솔루션을 찾고려고, 당분간 팠죠 ...
이 시간은 우리의 모든 시간 애송이 놈이 흉내 내 브라우저의 CSS 불투명도에 대한 모든 지원을 놓아 또 가십을 해왔다. 표준이 아닌`필터 : 알파 (불투명도 = # #)`의 CSS 특성이 잘 제거하지만, 또한 완전히 CSS3 투명도 지원 (다른 모든 브라우저가 멋지게에 지켰어야는지 등)을 추가할 걸 깜빡했습니다. 하나님은 CSS 불투명도 (IE 5.0 이후, 제가 추측)에 대해 말씀 하신지 그래서 처음으로 웹 브라우저는 CSS의 투명도를 지원하지 않습니다.
그리고 지금 위에 크림 : IE 8 팀의 공식적인 소식은? 그것은 "우리가 IE의 차기 버전에서 이것을 고려할 것입니다" "의도적으로 설계된 동작 '인데.

PS : FF에서이 페이지를보십시오, 그게 깨끗하게 보입니다 맹세!

적 목록 항목 (리) 태그와 CSS를 사용 (또는 하나를 만드는) 세로 메뉴를 만든 경우가 발생할 수도 있습니다,이 아직 IE 블록 레벨 요소를 포함 목록 항목 사이에 여섯 삽입 이러한 격차, 인터넷 익스플로러, 다른 버그 마크업에서 목록 항목 사이에 공백이있다면 즉. 감사합니다, 그런데 덕분에, IE 버전 7이 버그에서 무료 보인다.
나, 그리고 더 많은 것, 당신이 아직 너무 IE6에서 작업하는 새로운 레이아웃을 받아야 좌절 개발자,이 밴드에 속해있다면, 이것은 유용할 수 있습니다. 보라 구 ...

샘플 마크업 :

<ul id="menu">
<li> <a href="#"> 홈 </ a> </ 리>
<li> <a href="#"> 정보 </ a> </ 리>
<li> <a href="#"> 서비스 </ a> </ 리>
<li> <a href="#"> 포트폴리오 </ A> </ 리>
<li> <a href="#"> FAQ </ A> </ 리>
<li> <a href="#"> 문의 </ a> </ 리>
</ UL>

당신은 수직 메뉴로 위의 마크업을 transfrom하려면, 아래의 하나와 유사한 몇 가지 CSS를 만들 수 있습니다 ....

샘플 CSS ...
# 메뉴 {
여백 : 0; 패딩 : 0; 배​​경 : # FF9900;
목록 스타일 타입 : 전혀 없으며 폭 : 150px;
}
# 메뉴 리튬 {여백 : 0; 패딩 : 0;}
# 메뉴 {디스플레이 : 블록;
색상 : # 555555;
텍스트 장식 : 없음;
패딩 : 0 15px;
라인 - 높이 : 2.5; 국경 - 하단 : 1px 고체 # FFF;
}

당신이 볼 수 결과 ...

이 버그 ... (수정 / 굵은 기울임 체로 CSS를 추가)를위한 솔루션

# 메뉴 {
여백 : 0; 패딩 : 0; 배​​경 : # FF9900; 목록 스타일 타입 : 없음; 폭 : 150px;
플로트 : 왼쪽, / *이 떠오르 목록 항목이 포함되어 있습니다 * /
}
# 메뉴 리 {
여백 : 0; 패딩 : 0;
플로트 : 왼쪽, / *이 수정 * /
폭 : 100 %; IE6에서 / * 공백 버그 * /
}
# 메뉴 {
디스플레이 : 블록; 색상 : # 555555;
텍스트 장식 : 없음;
패딩 : 0 15px;
라인 - 높이 : 2.5; 국경 - 하단 : 1px 고체 # FFF;
}

위의 솔루션 doesnot는 (단지 IE6에 알려진 이유로) 일할 것 같다면 ... 대신에이 방법을 시도

오직 당신의 마크업이 추가 IE6에서만 스타일을 추가합니다 ...

<-! 너무 IE 7면>
<style type="text/css">
# 메뉴 리튬 {전시 : 인라인 블록;}
# 메뉴 리튬 {디스플레이 : 블록;}
</ 스타일>
<[endif] ->

여러 행사에서 팝업 부서 / lightboxes / 팁과 페이지 레이아웃을하고있는 동안은 우리는 몇 가지 양식 SELECT 객체 설계에 의해,이 팝업 사단의 아래에서 일어나는 그것을 통해 보여주는 상황을 본적 등 .... 불쾌해!

글쎄! 당신은 쉽게 FF와 IE7을 위해 적절하게 Z-인덱스 값을 조정하여이 문제를 해결할 수 있습니다. 그러나 좋은 옛날 (웃기 의도) IE6이 의도한대로 동작하지 않습니다 .... 당신이 당신의 팝업과 ... 으악!! 약간 크게 높은 Z-인덱스 값을 적용 후에도 통해 SELECT BOX 쇼!

이 문제에 대한 수정은 없습니다하지만,있다, 나는 믿고, 당신에게 대부분의 나를 위해 잘 작동 제가 사용하는 가장 간단한 솔루션을, 말할 임 여기에 몇이 문제를 해결 -하는 방법,하지만보다 더 가지 경우 ....

"당신이 팝업을 표시하면 루즈 선택 상자 숨기기"

단순히 여러분의 스크립트 스니펫 (snippet)에서 귀하의 팝업을 보여, "숨겨진"로 선택 상자의 가시성을 설정하는 스크립트의 조각을 추가

document.getElementById ( 'my_select') style.visibilty = "숨겨진".;

그리고 팝업 부문 가깝게 다시 설정 기억

. document.getElementById ( 'my_select') style.visibilty = "표시";

여기서 "my_select"는 자극 SELECT 박스의 ID입니다

이게 도움이 되었으면 좋겠 ...

PS. 동적 팝업 DIV 아래 IFRAME합니다 (팝업과 동일한 크기) positionining 같은 당연히 다른 옵션이 있는데 ... 이것도 잘 작동하지만, DOM 요소, 스크립트 및 두통의 하중 이외에. 나도이 솔루션을 사용하고 있고, 당신이 할 경우이 옵션과 관련하여 도움이 전혀 필요 알려주 않습니다. 기꺼이 도와 것이다!

몇 개월 전에 우리가 (단지 IE6 볼 것입 CSS의 조각 포함할 수 있는지,보고 만이 이거야의 경우에 ). 뿐만 아니라 이것을 달성하기위한 다른 방법이있다. 간단히, 별도의 CSS를 포함하여 타겟 IE의 특정. 이것은 조건부 주석으로 호출되는 구현할 수 있습니다.

조건부 코멘트 브라우저 유형 및 버전을 감지하는 방법입니다. 브라우저 감지는 내용이 브라우저의 특정 사용자에게 제공되도록 수행됩니다. 브라우저 감지는 다양한 기술을 사용하여 수행할 수 있습니다. 이 메소드는 JavaScript를 사용하여 스타일 스위칭을 포함하는 이전의 방법 이상의 몇 가지 장점을 가지고 있습니다. 중요 몇 가지 나열하려면 것입니다;

• 스크립팅이 필요하지 않습니다
• 크로스 - 브라우저

이걸 어떻게해야합니까?

인터넷 익스플로러 5에서 뭔가를 해주 전용
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

모든 IE 버전에서 뭔가를 해주세요
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

새로운 모든 IE 버전에서 뭔가를 해주 해당 IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

자세한 조건부 vartiations 내용은 MSDN에서이 정보를 읽어
조건부 주석에 대하여

당신은 간단한 것을 그냥 IE6에서 작업을 거부하는 방법, 때때로 눈에 띄지 않나 ... location.href는 그런 것입니다.

당신은 아래와 같은 당신의 앵커 태그에 대한은 onClick 함수를 추가하면 ...

<a href="javascript:void(0);" onclick="onClickLink('xxx');"> 새 위치로 이동하세요 </ a>

이와 같은 일부 함수로 ...
함수 onclickLink (ID) {
VAR URI = "test2.html ID =?"+ ID;
window.location.href = URI;
}

당신의 아이러니하려면 간단한 스크립트 이러한 조각 IE에서 작동을 거부 것을 알 것입니다 ... 글쎄! 내가 여기있는 이유를 이야기하지만, 그것이 가치가 될 것입니다 ... 그렇더라도, 난 해결책을 갖고있는 것 같다지만 생각할 수 없다 (우리는 이것은 IE6을 위해 조정할 추가할 왜 자바 스크립트를 이해한다면 제 생각엔, 당신은 이해합니다)

솔루션

<a href="javascript:void(0);" onclick="onClickLink('xxx'); 리턴 false; "> 새 위치로 이동하세요 </ a>

당신은 어떤 간단한 답변하면 코멘트를 작성하시기 바랍니다. 그것은 정말 많은가, 나는 내기, appretiated됩니다!

당신은 잠시 동안 CSS를 작성되었을 경우의 CSS 레이아웃은 모든 새로운 브라우저 (나중에 Internet Explorer 6 이상의 브라우저를 의미)에서 좋은 모습 때 문자 그대로 머리를 당길 때 그 시간을 경험했는데, IE 6 울화통를 throw합니다. 당신은 CSS를 조정하기 위해 열심히 노력하지만 그것이 작동하지 않습니다 ... 음! 이러한 해킹을 시도 ...

1. 해킹을 밑줄 : -
정의함으로써, CSS 2.1 사양은 CSS의 식별자에 ( "_") 밑줄 수 있습니다. 그러나 많은 브라우저는 아직 어떠한으로 진행 식별을 강조 무시하지만 인터넷 익스플로러 것 같습니다. 이것은 IE의 버그 / 기능 때문에 전용 이거야에 대한 CSS 속성을 설정하는 매우 명확한 방법이된다. 그래서 인터넷 익스플로러 (모든 버전지만, IE 7)의 표시, 시작에 밑줄로 작성된 CSS 속성을 기억

#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}

이것의보기 데모가 해킹을 강조

또한, IE6 용 분 높이 해킹은 밑줄 해킹을 사용, 체크 아웃

2. 해쉬 (#) 해킹 : -
이 해킹을 강조 마찬가지로, 이것은 좋은 차이로 역시 이거야 oly위한 것입니다, 처음에 #으로 선행 속성 식별자는 모든 IE 버전을 볼 수 있습니다, IE7 포함 및 기타 표준 브라우저를 위해 보이지 않는 것입니다.

.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}

이 해킹은 수직이 솔루션을 맞춥니다 크로스 브라우저를 입증하기 위해 멋지게 사용되고, 우리의 더 찾기 위해이 문서에서 모습을 가지고

3. IE6 용 CSS 전용 : -
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}

이러한 해킹 아무것도 작동이 없을 때 하늘이 보낸 것 ... 이러한 해킹의 언젠가 당신 인생을 저장하면 커피 :) 나를 치료하는 것을 잊지 않는다

난 당신이 부문 (DIV)하고 해당 부서에서 mouseover 이벤트가있다면, 좋은 이유 (그것의 mouseover에 이미지 위에 몇 가지 태그를 표시하는 데 필요한되었다 나의 경우, 가능한 한 투명하게해야만이 문제를 가지고 이 투명 부문), IE는 mouseover 이벤트 (Firefox에서 괜찮았는데) 실행하는 데 실패했습니다.

시도 몇 가지 옵션이 ...있는 많은 단지 IE에서 해고 이벤트를 얻기 위해 필사적인 시도였다. 제가 일하는 줄 알았 현명한 자들 중 하나는 분열에 배경 색상을 설정하고 0으로 불투명도를 설정하는 것이었다 ... 글쎄! 작업을 힘!

일을 내가 필요한 기능을 방해하지 않는 것 같았다 최종 솔루션은 그 부문의 반복 / 투명 배경 이미지 한 픽셀을 넣어하는 것이었다

... 바보! 하지만 지금은 IE는 행복해 보인다.

간단한이 문제를 이용 디스플레이 해결하려면 인라인.

div {float:left;margin:40px;display:inline;}

당신 같은 사업부로 떠오르 요소가 있고 여백 오른쪽 또는 요소의 여백에서 왼쪽으로 배치하면 인터넷 익스플로러 6.0 HTML / CSS 레이아웃을 망치는 그 여백 값을 두 배로됩니다. 이 문제를 해결하기 위해서는 단순히 디스플레이를 추가 : 인라인, 여러분의 부동 요소.