iframe이 "기본"웹 페이지의 CSS 스타일을 상속받을 수 없다는 것을 알고 있지만 혼란 스럽습니다. 배경이 검은 색이고 흰색 텍스트가있는 기본 페이지가 있습니다. iframe의 배경색은 지정되지 않았지만 기본 페이지와 마찬가지로 검은 색입니다. 그러나 iframe을 사용하려면 기본 페이지의 다른 CSS 속성을 iframe에 대해 별도로 정의해야합니다. 왜 이런거야?iframe의 CSS 상속
html 요소 또는 body 요소에 HTML 문서의 배경을 설정하지 않으면 브라우저 기본값이 사용되며 초기 값인 transparent으로 예상 할 수 있습니다.
즉, iframe 요소가있는 다른 페이지에 포함 된 페이지의 경우 포함 페이지의 배경이 빛나게됩니다.
감사합니다.이 답변에 완벽합니다. 나는 그것이 약간의 기본값을 가져야 할 것이라고 생각하는데, 부모/주 윈도우에서 가져온 것이 놀랍습니다. – user3713442
개발자 도구을 사용하면 검은 색 배경의 출처를 파악할 수 있습니다. 당신은 단지 F12 키를 눌러 키보드에, 당신은 IE 나 크롬을 사용하는 경우
수 있습니다 (이것은. 브라우저에 내장) 다음 IFrame을 선택 요소 선택기 (왼쪽 상단)를 사용합니다. 왼쪽에는 IFrame에 적용되는 CSS 스타일이 모두 표시됩니다.
이것은 무슨 일이 일어나고 있는지에 대한 통찰력을 줄뿐만 아니라 브라우저에서 디버깅 할 수있는 새롭고 값진 도구를 제공합니다.
참고 : firefox를 사용하는 경우에는 방화 광구를 설치해야합니다.
또한 유용 할 수 있습니다. CSS에서
우선 순위 규칙 (1 대부분의 선행이다) :
방화범을 줘서 고마워. 그것은 훌륭한 유틸리티처럼 보입니다. 아직 찾고 있지만 iframe에서 상속 된 CSS 속성을 볼 수 없습니다. 그것은 iframe 특정 CSS 속성을 나열하지만. – user3713442
크롬에서 보았을 때 기본 페이지의 본문에서 배경색이 상속되지만 텍스트 색상 스타일이 잘 렸습니다. 이상한. – user3713442
다른 의미가 있습니다. 우선 순위 규칙으로 내 대답을 편집했습니다. –
IFrame의 소스 URL이'wmode = transparent'로 끝나나요? –
이유를 모르겠지만 지정된 배경이없는 모든 iframe이 상속 된 것처럼 보입니다. 다른 CSS 속성이 상속하지 않으므로 이상합니다. – bjb568
아니요, iframe에는 이러한 장식이 없습니다. iframe 태그에서 지정하는 것은 폭과 높이뿐입니다. – user3713442