Commenti condizionali Script per IE11 non è possibile?Soluzione?

Question

Durante la creazione di un sito Web (QueenAlarright.co.uk) ho avuto problemi con il centraggio divs fissi in IE.Questo è stato reso più difficile come stavo cercando di creare un layout reattivo e quindi le larghezze di vari elementi dovevano essere fluidi.Ho risolto questo usando uno script chiamato nella testa per indirizzare le versioni di IE.Da allora IE11 è stato rilasciato e (nel suo pensiero in avanti) rimosso commenti condizionali ma non aggiunto supporto per il centraggio elementi div fissi o assoluti!

Quale sarebbe il miglior approccio per risolvere il problema o c'è un modo più semplice per andare su questo che non conosco?

Ecco lo script:

// 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 ti ritrovi a chiedere come mirare a mirare da solo, probabilmente stai meglio prendendo una pausa e riconsiderare l'approccio che stai prendendo.Internet Explorer può centrare elementi assolutamente / fissi nonché qualsiasi altro browser.In questo caso particolare, l'approccio che hai preso non è stato il più compatibile con il browser cross-browser.Potrei suggerire un'alternativa.

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

.

Questo approccio funzionerà lo stesso in tutti i browser moderni, dandoti un'esperienza costante.Ho creato un piccolo violino demo che dimostra questo: http://jsfiddle.net/rx2jb/show/.