문제

웹 사이트를 만드는 동안 (QueenalRight.co.uk) IE 중심의 고정 Div를 중심으로 문제가있었습니다.이것은 내가 반응 형 레이아웃을 만들려고 했는 것처럼 더 어려워졌고, 따라서 다양한 요소의 너비가 유체 일 필요가 있습니다.헤드에서 호출 된 스크립트를 사용하여 IE의 버전을 대상으로 해결했습니다.그 이후 IE11이 출시되었으므로 (사고가 앞으로 사고에있어) 조건부 의견을 제거했지만 고정 또는 절대 DIV 요소 센터링에 대한 지원이 추가되지 않았습니다!

문제를 해결할 수있는 최선의 방법은 무엇입니까 아니면 내가 모르는이 일에 대해 더 쉬운 방법이 있습니까?

여기에 스크립트가 있습니다 :

// script to achieve horizontal centering in internet exporer! Grrrrr!

function topSize() {


    // get screen width
    var screenWidth = $(window).width();

    // resize
    var halfScreenWidth = screenWidth/2;
    var topWidth = $('#top').width();
    var topBGWidth = $('#top-bg').width();
    var minusMarginInner = (-1)*(topWidth/2);
    var minusMarginBG = (-1)*(topBGWidth/2);


    $('#top').css({
        "left":"50%",
        "right":"auto",  // overwrites the right 1% property previously used for centering
        "margin-left":minusMarginInner + "px"
    });

    $('#top-bg').css({
        "left":"50%",
        "right":"0",  // overwrites the right 1% property previously used for centering
        "margin-left":minusMarginBG + "px"
    });

}


$(document).ready(function() {
var screenWidth = $(window).width();
if (screenWidth >= 1096) {
    topSize();
}
}); // document ready test window size and run topsize function

$(window).resize(function() {
var screenWidth = $(window).width();
if (screenWidth >= 1096) {
    topSize();
}
}); // window resize test window size and run topsize function
.

도움이 되었습니까?

해결책

즉, IE만을 어떻게 대상으로하는지 묻는 것을 발견하면 아마 당신이 복용하는 접근 방식을 깨고 재검토하는 것이 좋습니다.Internet Explorer는 다른 모든 브라우저뿐만 아니라 절대적으로 / 고정 요소를 가운데를 가질 수 있습니다.이 특별한 경우, 당신이 취한 접근법은 가장 크로스 브라우저 호환이 아니 었습니다.나는 대안을 제안 할 수 있습니다.

.center {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}
.

이 방법은 모든 현대 브라우저에서 동일하게 작동하므로 일관된 경험을 제공합니다. http://jsfiddle.net/rx2jb/show/int//a>.

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