Question

虽然创建了一个网站（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

Answer 1

如果您发现自己在询问如何单独定位IE，那么您可能最好休息一下并重新考虑您正在采取的方法。 Internet Explorer可以像其他任何浏览器一样集中绝对/固定元素。在这种特殊情况下，您采用的方法并不是最兼容的跨浏览器。我可以提出另一种选择。

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

此方法在所有现代浏览器中的工作方式相同，为您提供一致的体验。我创建了一个小型演示小提琴演示：http://jsfiddle.net/Rx2Jb/show/。

IE11的条件评论脚本不可能吗？解？

1 个答案: