O script de comentários condicionais para o IE11 não é possível?Solução?

Question

Ao criar um site (queenalright.co.uk), tive problemas ao centralizar divs fixos no IE.Isso ficou mais difícil porque eu estava tentando criar um layout responsivo e, portanto, as larguras de vários elementos precisavam ser fluidas.Resolvi isso usando um script chamado no head para direcionar versões do IE.Desde então, o IE11 foi lançado e (em sua visão de futuro) removeu comentários condicionais, mas não adicionou suporte para centralizar elementos div fixos ou absolutos!

Qual seria a melhor abordagem para resolver o problema ou existe uma maneira mais fácil de fazer isso que eu não conheço?

aqui está o roteiro:

// 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

Answer 1

Se você estiver se perguntando como direcionar o IE sozinho, provavelmente será melhor fazer uma pausa e reconsiderar a abordagem que está adotando.O Internet Explorer pode centralizar elementos absolutamente/fixos tão bem quanto qualquer outro navegador.Neste caso específico, a abordagem adotada não foi a mais compatível com vários navegadores.Posso sugerir uma alternativa.

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

Essa abordagem funcionará da mesma forma em todos os navegadores modernos, proporcionando uma experiência consistente.Eu criei um pequeno violino de demonstração demonstrando isso: http://jsfiddle.net/Rx2Jb/show/.