IE6에서 표시 : 색이 지정된 배경색의 블록은 해당 색을 페이지의 맨 오른쪽으로 확장합니다. 표시로 변경 : 인라인으로 문제를 해결하지만 CSS에서 오른쪽 패딩 : 1em 을 지정 했음에도 불구하고 마지막 문자 바로 다음에서 색이 끝납니다. padding-left는 작동하지만 padding-right는 작동하지 않습니다. 해결 방법은 무엇입니까? 나는 몇 시간 동안 인터넷 검색을 해왔고 대답을 찾을 수 없다.표시를위한 패딩 권한 : IE6의 인라인 요소
답변
다른 브라우저에서도 마찬가지로 display:block
과 display:inline
이 작동하기를 바랍니다. IE6뿐만 아니라 다른 브라우저에서도 작동하기 때문입니다. 블록 요소는 전체 너비를 차지합니다 (너비를 직접 지정하지 않는 한 그 너비가 될 것입니다). 그리고 이후에 개행을가집니다. 인라인은 필요한 너비를 차지합니다 (너비가 다른 경우에도 그것을 사용하지 않을 것입니다) 그리고 새로운 라인이 없습니다. 이것이 배경색이 블록 요소 일 때 페이지의 맨 오른쪽으로 확장되는 이유입니다.
인라인 요소에서 패딩이 제대로 작동해야하므로 충돌하거나 문제를 일으키는 다른 요소 나 스타일이있을 수 있습니다. 코드 샘플을 보지 않고도 말할 수 없습니다.
display:inline-block
을 사용하면 요소를 인라인으로 유지하므로 전체 행을 차지하지 않고 줄 바꿈을 사용할 수 있지만 패딩, 여백 및 너비와 관련하여 블록 요소로 동작합니다. 그 IE6 (7) 해당을 실패 기본 인라인 (등 span
) 요소
있는 요소 display:inline-block
을 허용, 당신은 우리가 볼 수있는 문제를 재현 코드 예제를 제공해야하지만
주 다른 것이 영향을 미치고 있다면.
display : block은 width 속성을 존중하지만 right extent를 제한하는 데 사용할 수 있습니다. display-inline은 그렇지 않습니다. 다른 모든 브라우저가 잘못되어 IE6이 올바른 것은 맞을 수도 있습니다. 내가 원하는대로 IE6을 렌더링하는 방법을 알고 싶습니다. 대답 해줘서 고마워. – Dave
아, 미안하지만, 너비를 직접 지정하지 않은 경우에만 블록이 항상 전체 너비를 차지해야한다는 것을 의미하지는 않습니다. 너비를 직접 지정하면 블록 요소가 분명히 너비가되지만 인라인은 너비를 지정해도 항상 필요한 것을 사용하고 너비는 변경하지 않습니다. 나는 그 대답을 명확하게하기 위해 그 대답을 업데이트했다. 내가 더 혼란스럽게 만들었지 만 :) –
감사합니다. .... 대답은 분명합니다. – Dave
표시 할 요소 인 인라인 블록을 설정해보십시오. 때때로 도움이됩니다.
또한 컨텍스트에서 코드를 보면 상황을 더 쉽게 볼 수 있습니다.
아니요. display : 블록처럼 렌더링합니다. 어쨌든 고마워. – Dave
가장 좋은 해결책은 IE 6을 무시하는 것입니다. 여전히 IE 6을 사용하는 사람들은 나쁜 웹 페이지 디스플레이를 얻는 데 익숙하며, 네트워크 관리자는 모든 사람들이 사용하도록하는 것이 더 안전하다고 생각하기 때문에 주로 IE 6을 사용합니다.
두 번째 선택 솔루션은 텍스트 뒤에 빈 공간 (
)을 덧붙입니다.
- 1. 전설적인 IE6의 여백과 패딩 "동작"(도움!)
- 2. 상단과 인라인 요소 헤드 처음 HTML에서
- 3. CSS 오버플로/인라인 요소
- 4. 너비가 인라인 요소
- 5. jQuery로 인라인 요소 애니메이션하기
- 6. 블록 수준 인라인 요소 내부 요소
- 7. div 오른쪽의 인라인 요소 플로팅
- 8. Firefox에서 인라인 요소 위에있는 공간
- 9. 내가 인라인 HTML 스타일 요소
- 10. 이미지 표시를위한 코코아 질문
- 11. 이미지 표시를위한 오픈글 문제
- 12. QScrollArea의 패딩
- 13. ie6의 select html 요소 위에 고정 된 헤더
- 14. CSS 플로팅 인라인 요소 (960 GS)
- 15. 오버플로 인라인 요소 행 사이의 여백 제거
- 16. 웹 사이트 표시를위한 코드 채색
- 17. 표시를위한 지능형 경로 잘림/줄임표
- 18. 차트 표시를위한 Pure Javascript 라이브러리
- 19. jQuery 단일 이미지 표시를위한 복제
- 20. CSS가있는 IE6의 스크롤 DIVs
- 21. IE6의 가로 메뉴 문제
- 22. IE6의 가로 스크롤 막대
- 23. IE6의 JSON 객체 - 어떻게?
- 24. IE6의 CheckBox 문제
- 25. IE6의 모달 중심 문제
- 26. IE6의 Fancybox jquery 문제
- 27. a : ie6의 활성 문제
- 28. IE6의 jQuery 툴팁
- 29. float : left; ie6의 문제?
- 30. IE6의 최대 너비에 대해서
문제를 재현하는 코드를 게시 할 수 있습니까? –
이렇게하기 위해, 나는 지금 나의 간단한 예제로 IE6에서 올바른 행동을보고있다.
<스타일 유형 = "텍스트/CSS"> DIV { 배경 색 : 노란색; } .패딩 { 디스플레이 : 인라인; 줄 크기 : 25px; 높이 : 25px; 패딩 - 윗면 : 12px; 패딩 바닥 : 13px; 패딩 오른쪽 : 50px; 왼쪽 패딩 : 50px;Firebug는 문제가 IE 6에만 적용되는 경우에도 추가 스타일의 출처를 확인하는 데 유용 할 수 있습니다. –