Question

这是一个跨浏览器问题。在Chrome和Safari上，以下HTML具有不同的行为。在chrome和firefox上，文本将是＆＃39; 40px＆＃39;，而在Safari上，＆＃39; 0px＆＃39;。

我知道他们为什么表现不同。关于CSS转换，在chrome上，如果起始值是＆＃39; auto＆＃39;，它将不会触发转换，而.css（）会立即设置left值;在Safari中，起始价值是自动获胜并且不会阻止过渡，因此价值将转移到＆＃39; 40px＆＃39;在1秒钟内，在第一时刻，它的值是＆＃39; 0＆＃39;。

这种行为差异影响了我的计划。我希望在所有浏览器上立即设置CSS值，而不是传输。 jQuery是否提供了这样的功能，可以立即设置CSS值忽略CSS转换？

而且，如果不是，那么克服浏览器行为差异的最佳方法是什么？

菲德尔：http://jsfiddle.net/ajLxgcn7/2/

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script>
        $(document).ready(function(){
            var s = $('.a').css('left',40).css('left');
            $('.a').html(s);
        });
        </script>

        <style>
        .container {
            position:relative;
            width:300px;
            height:300px;
            background-color:yellow;
            padding:20px
        }
        .a {
            padding:40px;
            position:absolute;
            background-color:red;
            width:100px;
            height:100px;
            color:black;
            left:auto;
            transition:all 1s ease
        }
        </style>
    </head>
    <body>
        <div class='container'>
        <div class='a'></div>
</div>
    </body>
</html>

Answer 1

尝试输入值类型

$('.a').css('left', '40px');

jQuery.css（）可以忽略CSS转换吗？

1 个答案: