jquery - IE11 的条件注释脚本不可能吗？解决方案？

Question

在创建网站 (queenalright.co.uk) 时，我遇到了在 IE 中将固定 div 居中的问题。这变得更加困难，因为我试图创建一个响应式布局，因此各种元素的宽度需要是流畅的。我使用一个在 head 中调用的脚本来解决这个问题，以定位 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

Answer 1

如果您发现自己在问如何单独针对 IE，您最好休息一下并重新考虑您所采用的方法。 Internet Explorer 可以像任何其他浏览器一样将绝对/固定元素居中。在这种特殊情况下，您采用的方法并不是最兼容跨浏览器的方法。我可以建议一个替代方案。

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

此方法适用于所有现代浏览器，为您提供一致的体验。我创建了一个小的演示 fiddle 演示:http://jsfiddle.net/Rx2Jb/show/ .