배경의 빈 요소에 의해 사용되 다음 요소에서 즉

StackOverflow https://stackoverflow.com/questions/289315

문제

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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top