Internet Explorer 6에서 미리보기 이미지의 크기가 유지되지 않습니다.

Question

Galleria Classic을 사용하고 있습니다. Internet Explorer에서 축소판의 높이와 너비가 모두 같게하려면 어떻게해야합니까? CSS 스타일을 (.galleria-thumbnails .galleria-image) 스타일을 사용하여 조정했습니다. 그것은 사파리와 파이어 폭스에서 훌륭하게 작동하지만 Internet Explorer는 내 엄지 손가락의 너비를 늘이거나 사이즈를 변경하고 잘라내는 것처럼 보입니다. 높이는 결코 효과가있는 것처럼 보이지 않지만, 나는 그들 모두가 같기를 바랍니다. 어떤 아이디어? 여기

내가 BODY 태그를 닫기 바로 전에있는 스크립트입니다

<script> 
    Galleria.loadTheme('tools/galleria/themes/classic/galleria.classic.js'); 
</script> 

<script> 
    $('#galleria').galleria({ 
     extend: function() { 
      this.play(3000); 
      this.bind(Galleria.LOADFINISH, function(e) { 
       $(e.imageTarget).click(this.proxy(function(e) { 
        e.preventDefault(); // removes the garbage 
        var obj = this.getData(); 
        $.fancybox({ 
         'href': obj.image 

        }); 
       })) 
      }); 
     } 
    }); 
</script> 

과 같이 CSS 모양 : 이것은 아마도 가장 일반적인 IE 박스 모델 버그 고정

.galleria-thumbnails-container { 
    bottom: 0; 
    left: 5px; 
    position: absolute; 
    z-index: 2; 
    margin-top: 10px; 
    width: 400px; 
    height: 60px; 
} 
.galleria-carousel .galleria-thumbnails-list { 
    margin-left: 30px; 
    margin-right: 30px; 
} 
.galleria-thumbnails .galleria-image { 
    height: 40px; 
    width: 60px; 
    background: #000; 
    border: 1px solid #000; 
    float: left; 
    cursor: pointer; 
    margin-right: 5px; 
    margin-bottom: 0; 
    margin-left: 0; 
    text-align: left; 
} 

Answer 1

및 IE 6 이하에서 좌절감을주는 버그. 이것은 상자의 전체 크기를 계산할 때 IE의 다른 접근 방식으로 인해 발생합니다. IE는 100 픽셀로 계산으로있는 동안 우리는 W3C 사양에 따라

.box { 
    width:100px; 
    padding:10px; 
    border:2px solid #CCC; 
} 

쓰기 가정 해 봅시다 박스의 전체 폭은 모든 현대적인 브라우저에 따라 124px을해야합니다.

사양과의 이러한 편차는 많은 레이아웃 문제를 일으킬 수 있습니다. IE 6은 표준 호환 모드에 있다면 실제로 제대로 구현할 수 있습니다. 이 문제에 대한 여러 가지 해결 방법이 있습니다. 이 중 일부는 다음과 같습니다.

BOX-IN-A-BOX 이 기술에 따르면이 문제를 해결하기 위해 여분의 마크 업을 사용하기 만합니다. 주 요소에 패딩을 사용하는 대신 내부에 다른 요소를 삽입하고 패딩을 사용합니다.

<div class=”box”> 
    <div class=”box-inner”> 
    Testing for box model hack 
    </div> 
</div> 

마찬가지로이 경우 우리의 마크 업이 될 것입니다

.box { width:100px;} 
.box-inner {padding:10px;} 

단순화 BOX 모델 해킹 (SBMH)

이 문제를 해결하기 위해 인터넷 익스플로러의 CSS 파싱 버그를 사용합니다. 이 처음 앤드류 클로버

에 의해

을 설명했다 해킹에 대한 구조는

.box { 
    padding:20px; 
    width: 100px; 
    \width: 140px; 
    w\idth: 100px; 
} 

width: 100px;가 제대로 렌더링에서 Mozilla와 같은 브라우저와 오페라위한 첫 번째 줄입니다. 오페라 및 다른 브라우저는 이스케이프 문자 (\)를 질식하므로 두 번째 및 세 번째 속성을 무시합니다. 두 번째 속성 \width: 140px;은 IE 5 및 6/단조 모드 용입니다. 마지막 줄 w\idth: 100px;은 이스케이프 친화적 인 브라우저 (비 단점 모드의 IE 6 포함)에서 읽히고 너비를 100px로 다시 설정합니다.

BOX-SIZING 새로 도입 된 CSS3 상자 크기 조정 속성을 사용하면 브라우저에서 사용할 상자 모델을 선택할 수 있습니다. W3C 상자 모델은 content-box이고 Internet Explorer 상자 모델은 border-box입니다.

이 기능을 사용하면 여러 브라우저에서 요소의 크기를보다 쉽게 ​​제어하고 크기를 동일하게 설정할 수 있습니다.

.box { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

웹 사이트가 쿼크 모드로 렌더링되는 경우가에 border-box 속성을 가진 것처럼, IE6는 비표준 박스 모델을 사용하여 렌더링, 그래서 이미 렌더링됩니다. 최신 브라우저는이 속성을 설정하여 IE의 버그가있는 상자 모델을 채택합니다. 이 도움이 될 수

희망 ...