0

我正在使用这种方法在屏幕上居中框：

#container {
        position:fixed;
        width:100%;
        height:100%;
        top:50%;
        left:50%;
        margin-top:-50%;
        margin-left:-50%;
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }

（我需要缩放某些功能）

它在 Safari 中工作，但在 Chrome 和 Firefox 中垂直对齐中断。是否有类似的方法可以跨浏览器工作？

4

1 回答 1

0

这就是我解决它的方法：

我通过 jQuery 重写了 100% 的盒子大小。一旦为盒子设置了特定的大小，它似乎可以在 FF 和 Chrome 中使用。

通过仅在需要时动态应用转换，我在页面首次加载时绕过了不需要的转换。...除非有一种更清洁的方法可以从转换完成中获取回调？

示例：https ://dl.dropboxusercontent.com/u/7782299/sample/zoom2.html

这是完整的代码：

<!DOCTYPE html>

<html lang="en">
<head>

    <link rel="stylesheet" href="support/CSSreset.css" type="text/css" charset="utf-8">

    <style>

    body {
        background:red;
        overflow:hidden;
    }

    #container {
        position:fixed;
        top:50%;
        left:50%;
        background:blue;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
    }
        #container.preon {
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
        }

        #container.on {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
        }

    </style>

    <script src="support/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

    $(document).ready( function() {

        $('#container').click(function() {

            $('#container').addClass('preon');
            $('#container').toggleClass('on');
            setTimeout( function() { $('#container').removeClass('preon'); }, 600);

        });

        placeContainer = function placeContainer() {

            $('#container').css({
                width: $(window).width() + "px",
                height: $(window).height() + "px",
                marginLeft: (($(window).width())/2)*-1,
                marginTop: (($(window).height())/2)*-1
            });

        };

        placeContainer();

    });

    $(window).resize(function() {

        placeContainer();

    });

    $(window).trigger('resize');

    </script>


</head>
<body>

    <div id="container"></div>

</body>
</html>
于 2013-11-14T19:13:05.713 回答