我想每個人都知道這樣一個事實:如果一個元素的容器是用CSS的transform屬性修飾的，那么所有帶有CSS屬性position: fixed的元素都不會像預(yù)期的那樣工作。

我翻了很多帖子，都沒有找到這個問題的具體解決方案。我的意思是，我的應(yīng)用程序中有幾個需要position:f ixed來工作的元素，因為我已經(jīng)在body本身上應(yīng)用了transform: scale()屬性。

由于我找不到任何使它工作的技巧，我轉(zhuǎn)而詢問是否有一種替代CSS的transform: scale()屬性的方法。zoom當(dāng)然不是答案，因為它仍然不兼容許多瀏覽器(尤其是Firefox)。

請建議我應(yīng)該做些什么改變來使它們都工作？

angular.element($window).on('resize load', function () {
    var isFirefox = navigator.userAgent.indexOf("Firefox") != -1;
    var oWidth = angular.element($window).width();
    var oHeight = angular.element($window).height();
    console.log(oWidth + " " + oHeight);
    if (oWidth >= 1903)
        applyCss(100, 100, 1, isFirefox);
    if (oWidth < 1903 && oWidth > 1441)
        applyCss(125, 125, 0.8, isFirefox);
    if (oWidth <= 1441 && oWidth > 1268)
        applyCss(149.3, 149.3, 0.67, isFirefox);
    if (oWidth <= 1268)
        applyCss(166.7, 166.7, 0.6, isFirefox);
});

function applyCss(width, height, scale, isFirefox) {
    var body = angular.element('body');
    body.css({
        '-moz-transform' : 'scale(' + scale + ')',
        '-moz-transform-origin' : 'left top',
        '-webkit-transform' : 'scale(' + scale + ')',
        '-webkit-transform-origin' : 'left top',
        'transform' : 'scale(' + scale + ')',
        'transform-origin' : 'left top',
        'width' : width + '%',
        'height' : height + '%',
    });
    if (isFirefox) //body's position absolute in case of Firefox
        body.css({
            'position' : 'absolute'
        });
}

我用來實現(xiàn)縮放的代碼。

你的div是100x200。如果你想縮放(x ),你所要做的就是高度=100*x，寬度=200*x。當(dāng)然，你可以用純css來實現(xiàn)，但是這樣更容易編碼。