IE_Experience 교환에서 CSS 속성 오버플로를 사용하는 버그 수정-CSS 튜토리얼-php.cn

IE_Experience 교환에서 CSS 속성 오버플로를 사용하는 버그 수정

WBOY

풀어 주다： 2016-05-16 12:06:16

원래의

1685명이 탐색했습니다.

다음은 테스트 HTML 파일을 생성하고 싶습니다.

코드 복사 코드는 다음과 같습니다. 다음:

 
 " rel="license">Abide by my copyright 
                                                 라이센스" >저의 저작권을 준수하세요 
                                                                          저의 저작권을 준수하세요 
                                                                                                                                                                      /div> 

위 코드에 다음 CSS를 적용하겠습니다.




코드 복사 다음과 같습니다:div{ 
 width: 60% } 

pre{ 
 Overflow : auto 
 background-color : # fff0f5 ; 
 margin : 1.6em 0 ; 
 padding : 0 1.6em ; 
} 


Firefox의 위 코드 표시는 예측 가능합니다. 

그러나 IE6에서는 Overflow 효과가 표시되지 않습니다



그림 1 IE6에서의 효과

IE7의 디스플레이도 성가신 오른쪽 스크롤 막대가 있어서 조금 다릅니다 

그림 2 IE7에서의 효과

IE6의 버그는 포함 블록에 너비를 추가하여 해결할 수 있습니다. 즉, 


 코드 복사  코드  pre{ 
 Overflow : auto ;  background-color : #fff0f5 ; 
 margin : 1.6em 0 
 padding : 0 1.6em ; 
 width : 90% ; 
} 


이때 IE6의 스크롤바가 나오지만 오른쪽 스크롤바가 추가된 것 외에는 IE7과 동일하게 동작합니다. 

추가 오른쪽 스크롤 막대가 있는 이유는 IE가 항상 요소의 전체 높이 안에 하단 스크롤 막대를 추가하기 때문입니다. 이는 하단 스크롤 막대가 차지하는 요소 높이의 일부를 차지하므로 완전히 확장될 수는 없습니다. 표시되므로 IE 스크롤 후 차단된 요소의 내용을 볼 수 있도록 오른쪽에 스크롤 막대가 자동으로 추가됩니다. 

마지막으로 IE 오른쪽의 스크롤 막대를 제거하기 위해 다음 CSS를 포함 블록에 추가합니다. 



코드 복사 코드는 다음과 같습니다: pre{ 
 Overflow : auto ;  background-color : #fff0f5 
 margin : 1.6em 0 ; > padding : 0 1.6em ; 
 width: 90%; 
 Overflow-y: Hidden; Firefox, Opera 및 Safari에서와 마찬가지로. 

실제 적용에서 이 효과는 가장 일반적으로 코드 블록인 모든 고정 형식 요소(일반적으로 사전 요소)에 적용될 수 있습니다.