Comentarios condicionales Script para IE11 ¿No es posible?¿Solución?

Question

Mientras crea un sitio web (Queenalright.co.uk), tuve problemas con las divisiones fijas de centrado en IE.Esto se hizo más difícil, ya que estaba tratando de crear un diseño sensible y, por lo tanto, los anchos de varios elementos necesarios para ser fluidos.Resolví esto usando un guión llamado en la cabeza a las versiones de destino de IE.Desde entonces, IE11 se ha liberado y (en su pensamiento hacia adelante), se eliminó los comentarios condicionales, pero no se agrega el soporte para centrar los elementos fijos o absolutos.

¿Cuál sería el mejor enfoque para solucionar el problema o hay una forma más fácil de hacer esto, no conozco?

Aquí está el guión:

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

Si se encuentra preguntando cómo apuntar a IE solo, probablemente esté mejor tomando un descanso y reconsiderando el enfoque que está tomando.Internet Explorer puede centrar elementos absolutamente / fijos, así como cualquier otro navegador.En este caso en particular, el enfoque que tomó no fue el compatible con la mayoría de los navegadores cruzados.¿Puedo sugerir una alternativa?

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

Este enfoque funcionará igual a todos los navegadores modernos, lo que le brindará una experiencia consistente.He creado un pequeño violín de demostración que demuestra esto: http://jsfiddle.net/rx2jb/show/.