•  08-06-2019
  •  | 
  •  

문제

IE7에 문제가 있습니다.IMG라는 헤더가 있습니다.그 아래에는 메뉴를 나타내는 div가 있는데, 메뉴는 사이에 공백 없이 서로 연결되어야 합니다.둘 다 너비가 1000px입니다.Opera와 FireFox에서는 헤더와 메뉴가 서로 깔끔하게 연결되어 있습니다.그러나 IE7에서는 메뉴 DIV와 IMG 사이에 작은 공간이 있습니다.IMG에서 패딩과 여백을 명시적으로 정의하려고 시도했지만 작동하지 않습니다.이전에 이 문제가 있었던 적이 있어서 IE7의 문제인 것 같습니다.

내 HTML 코드:

<div id="middle">
  <img id="ctl00_headerHolder_headerImage" src="pictures/headers/header_home.jpg" style="border-width:0px;" />

  <div id="ctl00_menuPanel" class="menu">
    <a id="ctl00_home" href="Default.aspx" style="color:#FFCC33;">Home</a> |
    <a id="ctl00_leden" href="Leden.aspx">Leden</a> |
    <a id="ctl00_agenda" href="Agenda.aspx">Agenda</a> |
    <a id="ctl00_fotos" href="Fotos.aspx">Foto's</a> |
    <a id="ctl00_geschiedenis" href="Geschiedenis.aspx">Geschiedenis</a> |
    <a id="ctl00_gastenboek" href="Gastenboek.aspx">Gastenboek</a>
  </div>
</div>

도움이 되었습니까?

해결책

요소에 무슨 일이 일어나고 있는지 검사하고 다루는 영역의 개요를 제공하는 IE 개발자 도구 모음을 사용해 보세요.문제를 더 잘 이해할 수 있을 것입니다.

다른 팁

해결책: 

img {
padding: 0px;
margin: 0px;
display: block;
}

표시하다:차단하다

나는 이것에 많이 부딪친다.특정 동작을 추적하는 대신 img/div/etc 선택기의 패딩 및 여백 속성을 명시적으로 0으로 설정하고 테두리 스타일을 설정하여 온전성 검사를 시도해 보세요.없음 테두리 너비:0px border="0" 등

IE Dev Toolbar는 필수이지만 단일 픽셀 문제를 파악하는 데 도움이 될 가능성은 거의 없습니다.

표시 블록을 사용하는 대신 IE7은 공백을 사용하여 몇 가지 매우 이상한 작업을 수행합니다.이미지와 div 사이의 공백을 제거하고 어떤 일이 일어나는지 확인하세요.

CSS 재설정(예: 유이 CSS 재설정) 이런 일에 아주 좋습니다.디스플레이 차이를 최소화하기 위해 많은 HTML 요소에서 패딩, 여백 및 기타 표시 속성을 재설정합니다.

해결책...디스플레이:차단하다

브라우저의 렌더링 모드를 모르면 해당 질문에 제대로 답할 수 없습니다.CSS 렌더링 문제가 있는 경우 어떤 문서 유형을 가지고 있는지 사람들에게 알려야 합니다.참조하는 이미지 동작은 표준 모드와 반대되는 특수 모드에서 다릅니다.최소 테스트 케이스에는 문제를 재현하기 위한 전체 HTML 문서와 CSS가 포함되어야 합니다.시간을 낭비하지 않고 쉽게 대답할 수 있도록 필요한 정보를 제공하지 않고 사람들에게 도움을 요청하지 마십시오...

실제 솔루션:

#middle { font-size: 0; line-height: 0; }
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top