어떤 블로그에서 읽었거든요 ... 그것이 미래의 심판을 위해이 카탈로그에 좋은 줄 알았는데 .... 또한 당신이 언젠가 물었 것이 중요한 면접 질문이 될 수도 ....
IE7에서 IE6과 검정색에 녹색, 최신 브라우저에서 빨간색 구형 브라우저에서 파란색으로 단락을 표시합니다 CSS의 미리보기 쓰기
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
비 IE 브라우저를위한 CSS : 그것의 더 아래 예제처럼 CSS 아동 선택 자이 IE에서 작동하지 않습니다, CSS 개발자 뉴스가 없습니다.
예 사업부 의미> 스팬 {일부 CSS}, "스팬 요소는 분열 요소의 자식 (그리고하지 손자 또는 증조 자녀 등)이있을 때."
그러나 우리의 장점이 CON를 사용했습니다. 역사적으로, 아동 선택기는 IE에서 CSS 명령을 숨기기 위해 사용되었습니다. 간단하게 배치하여 html>body 어떤 CSS를 명령 IE의 앞에 그것을 무시합니다 :
html>body .foo { CSS commands go here ;}
때문에이 작동 <body> 항상 자식 <html> - 그것은 물론의 손자 또는 증손이 될 수 없다 <html> .
이제 IE 7은 하위 선택을 이해하는 당신은 간판보다 큰 후 직접 비어있는 주석 태그를 삽입해야 IE 7은 다음이 선택기를 (왜 누가 알아!?) 이해되지 않으며, 따라서 전적으로이 CSS의 명령을 무시합니다. :
html> /**/ body .foo { CSS commands go here ;}
이미 전에 본하지 않은 경우뿐만 아니라 다음을 통해 읽기를
평소와 같이, IE와 이것은 IE를 만지면 중 상위 10 순위에 반드시있는 많은 예상치 못한 문제 중 하나.
문제 진술 (이것은 유사한 misbehaviors이 어쩌면 내 문제이기도) :
저는 많은 DIV 해당 페이지에서 섹션의 아무것도하지만 제목없는 클래스 "sectionhead"있는 페이지에 있습니다. 그래서 어떤 스타일은 이렇게보고있다
. sectionhead {글꼴 크기 : 18px; 배경 : # cfcfcf; 패딩 : 5px;}
사업부는 검은 텍스트 밝은 회색 바있다. 어떻게 IE에서 발생하면 이러한 섹션 헤더의 일부가 확인 표시가 있지만, '고도'키를 때 페이지 아래로 클릭하면, 페이지를 스크롤하거나 페이지 등에 무언가를 클릭 때때로 그들이 사라지게하는 경향 전까지 일부는 보이지 또는 스크롤 막대로 스크롤할. 그들은 때로는 (F5) 페이지를 다시로드되면 다시 나타날 것 같습니다. 간단한 스타일로 나는 짧은 완벽 간단한 DIV 나쁜 동작합니다.
무슨 그런 엉뚱한 행동을 일으킬 수 있을까? 글쎄! 솔직히, 나도 몰라!
가능한 해결 :
다시 이유는 묻지하지만, 많은 경우이 문제는 위치를 추가할 때 사라지는 경향이 없어이 같은, 요소 스타일을 행동 잘못에 대한 상대를
. sectionhead {글꼴 크기 : 18px; 배경 : # cfcfcf; 패딩 : 5px; 위치 : 상대적}
불가사의하지만, 무슨 말을해야할지? 하나님은 IE에서 저를 축복이 있기를!
그리고 비슷한 문제가 있었다면, 미를 공유 해.
적 목록 항목 (리) 태그와 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] ->
IE 6을 게시, MSIE는 대부분의 다른 표준 브라우저에 대한 표준을 몇 가지 CSS 속성을 추가하여 저희 UI 개발자에게 친절했다. "분 높이"의 하나 같은 usefull 속성입니다. 더 긴 숨이 찬 설명이 필요없는 아주 스트레이트 포워드 속성입니다. 그것이 주택 콘텐츠가 보유하고 중요한 저울 (일반 바닐라 '높이'속성 달리) 또는 CSS의 단어 수있는 것보다 덜 차지하고 때 사업부 분 높이가 설정되면, 그것은 항상 그 세트의 높이를 유지, 그것처럼 동작 분할 그의 "높이"는 "자동"으로 설정되어 있습니다 ...
또한, IE6에서 작동합니다 여전히 코드를 CSS를해야합니다 우리 불쌍한 개발자, 내용은 "분 높이"의 해제 여부는 언젠가는 쇼 스토퍼를 증명할 수있는 ... Donot의 절망을.
다행히도, 우리가 우위에 사용하고 우리의 목표에 도달하는 데 통해 방법을 해킹할 것이 IE에서 충분한 만지면를 가지고 ... 즉 계열 사업부를 만들지만 같은 IE6에서의 최소 높이
해결 방법 1 : 밑줄 해킹 [사용 ... 더 읽기를 ]
.box1 {
min-height: 200px;
height:auto;
_height:200px;
}HTML : -
<div class="box1">Some dynamic content with variable height ...</div>
해결 방법 2 : CSS의 속성 선택 해킹을 사용하여
.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}
HTML : -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>
CSS의 속성 선택기 해킹이 브라우저는 이전 THA IE6가 atribute-셀렉터를 무시하고 사실을 활용합니다. 클래스 = "someclass"다른 컨테이너 부문의 요구 사항을 확인합니다. 그냥이 부문에 대한 클래스 속성의 presense는 오페라, 모질라와 MSIE7위한 자동 나중에 다시 높이보다 우선합니다. atribute의 선택자를 지원하지 않는 IE6은, 그것을 무시합니다.
여러 행사에서 팝업 부서 / 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에서이 정보를 읽어
조건부 주석에 대하여
당신은 잠시 동안 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 레이아웃을 망치는 그 여백 값을 두 배로됩니다. 이 문제를 해결하기 위해서는 단순히 디스플레이를 추가 : 인라인, 여러분의 부동 요소.
