배경의 빈 요소에 의해 사용되 다음 요소에서 즉
-
08-07-2019 - |
문제
IE6 에서는 단락은 다음의 빈 단락으로 표시의 배경 색상 빈 단락,나는 추측이 잘못입니다!이 올바르게 작동하는지 내가 확인되지 않은 IE7.
이 있 CSS 이 문제에 대한 해결책,하나 이상의 제어를 받으려면 어떻게 해야 합니까?
(나는 오히려 하지 않았을 제거하는 빈 요소로 포함하는 코드를 작성하는지 여부를 확인하는 모든 요소가 비어 있기를 출력)
이 행동은 변경되지 않은 중 하나를 사용하여 엄격한 또는 전 doctypes(추가 이 댓글에 대응하여 답변)
흥미롭게도 효력이 발생하지 않는 텍스트와 색깔,배경 색상.
<html>
<head>
</head>
<body>
<p style='background-color:green'>Green content</p>
<p style='background-color:red'>Red content</p>
<p>Unstyled background working because previous red element is not empty</p>
<p style='background-color:green'>Green content</p>
<p style='background-color:red'></p>
<p>Unstyled background broken because previous red element is empty</p>
<p style='color:green'>Green content</p>
<p style='color:red'>Red content</p>
<p>Unstyled text color working because previous red element is not empty</p>
<p style='color:green'>Green content</p>
<p style='color:red'></p>
<p>Unstyled text color working even though previous red element is empty</p>
</body>
</html>
해결책
빈 단락은 의미가 없습니다. 즉, 잘못된 HTML을 쓰고 있음을 의미합니다.
또한 예제에는 DocType가 없습니다. 유효한 문서는 브라우저가 코드를 올바르게 해석 할 수있는 데 필수적입니다.
그러나 어쨌든,이 버그의 가장 간단한 해결 방법은 단순히 현재의 진단되지 않은 요소의 배경을 설정하는 것입니다.
다른 팁
나는 그냥 테스트는 IE7 에서 확인할 수 있는 발생합니다.
그것처럼 스타일이 적용되지 않은 단락 하지 않는 실제로 빨간색 배경,그것은 단지는 IE7 리에 빨간색 상자에 대한 빈 단락을 드로잉 후 다음 단락 정상입니다.
당신이 볼 수있는 자신이 노력에 의해 이 코드:
<p style='background-color:green'>Green content</p>
<p style='background-color:red; margin-left:50px'></p>
<p>Unstyled background broken because previous red element is empty</p>
당신이 볼 수는 붉은 단락이 50px 에서 왼쪽에 있습니다.
유 그것은 이 일을 하는 것은 사람의 생각한다.추가 코드를 확인하는 경우에는 단락이 비어 있지 않은,너무 열심히 플러스를 제거 쓸모없는 태그에서 출력하고 이 문제를 방지합니다.제공하는 가?
빈 단락에 깨지지 않는 공간을 두십시오 ...
<p style='color:red'>& nbsp;</p>
앰퍼 랜드 이후의 공간이없는 경우를 제외하고 ...
HTML 파일의 상단에 DocType을 추가하십시오.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
이로 인해 IE6은 형태를 표준 모드로 전환해야합니다. 이것은 올바른 상자 모델과 같이 많은 장점을 가져 오므로 어쨌든 그렇게해야합니다.
내가 찾은 이상한 해결 방법 중 하나는 다음과 같은 위치를 추가하는 것이 었습니다.
<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>