배경색과 이탤릭체는 인터넷 익스플로러 7 버그를 시작합니다.

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

문제

다음 코드는 내가 발생하는 문제를 보여줍니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style>

p
{
    background-color:#FFF;
}


</style>
</head>
<body>

  <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style='float:left;'>
  <p><em>This is an italic sentence.</em></p>
  <p><strong>This is a bold sentence.</strong></p>
  <p>This is a normal sentence.</p>

</body>
</html>

이 코드가 IE7에서 볼 때, Google 로고는 각 단락과 함께 정렬되어 오른쪽에 표시된 '흰색 수평 막대'가 왼쪽에 표시됩니다.

u003Cem>태그로 첫 번째 줄을 제거하면 선이 사라집니다. 직접 시도하십시오. 세 줄 각각을 제거하고 버그가 어떻게 변하는 지 확인하십시오.u003C/em>

세상에서 무슨 일이 일어나고 있습니까?

--

해상도 : Haslayout 문제. Zoom 추가 : 1 EM에 속성이 문제를 수정합니다.

도움이 되었습니까?

해결책

왜 그것이 일어나고 있는지 확실하지 않지만 디스플레이 추가 : EM에 인라인 블록 추가를 포함하여 그렇지 않은지 확인하는 방법에는 여러 가지가 있습니다.

다른 팁

이것은 떠 다니는 이미지 때문에 발생합니다.

이미지가 플로팅되면 기술적으로 자체 레이아웃이 없습니다. 흰색 막대는u003Cp> CSS에서는 #fff의 배경을 주었기 때문에 태그.

IE7의 경우는 생각합니다u003Cp> 태그는 실제로 맨 왼쪽의 페이지 시작 부분에서 시작하여 시작하여 시작하지만 그곳에서 시작하지만 플로팅 된 이미지를지나 콘텐츠를 부딪 히고 재미있는 흰색 막대가 떠 다니는 이미지의 위에 남겨집니다.

나는 당신에게 주어서 주위를 돌아 다니려고 노력할 것입니다u003Cp> 태그가 남았습니다. 이미지를 지나칠 수있는 충분한 마진을 만들면 더 이상 그 막대를 얻지 않아야합니다.

그러니 같은 것을 시도하십시오 ...

p{ background-color: #fff; margin-left: 300px; }

왼쪽 여백을 조정할 수 있지만 해당 라인을 따라 무언가가 흰색 막대를 제거해야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top