Opera 和 FireFox 无法读取 CSS3 旋转值答案

【问题标题】：Opera and FireFox cannot read CSS3 rotate valueOpera 和 FireFox 无法读取 CSS3 旋转值
【发布时间】：2011-09-12 12:53:35
【问题描述】：

我无法读取以下位置的 CSS3 变换旋转值：

Opera 9.62
Opera 10.51
火狐 4.01

在 IE、Chrome 和 Safari 中运行良好，但在上述三个中则不行。以下是出处：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <style>
        div {
            -webkit-transform:     rotate(-5deg);
            -moz-transform:        rotate(-5deg);
            -o-transform:        rotate(-5deg);
            -ms-transform:        rotate(-5deg);
            transform:            rotate(-5deg);
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {

            // tries to read the CSS rotate data
            // starts by reading -webkit-transform, if it
            // fails then read -moz-transform and so on
            var getRotation = function ($e) {
                var value = $e.css('-webkit-transform');
                if (value === undefined) {
                    value = $e.css('-moz-transform');
                    if (value === undefined) {
                        value = $e.css('-o-transform');
                        if (value === undefined) {
                            value = $e.css('-ms-transform');
                            if (value === undefined) {
                                value = $e.css('transform');
                            }
                        }
                    }
                }
                return value === undefined? '' : value;
            };

            var returnValue = getRotation($("div"));
            alert(returnValue === ''?
                "Failed to get rotation info!" : 
                "Got it: " + returnValue);
        });
    </script>
</head>
<body>
    <div>rotated</div>
</body>
</html>

live sample on jsfiddle here

所以，我想使用 jquery css() 读取旋转角度，但奇怪的是，Opera 10.51 和 FF 4.01（及以下）无法读取它，尽管 div 使用旋转效果正确渲染。

这看起来像是一个 jQuery 错误或浏览器错误。 有人有 Opera/FF 的解决方法吗？

如果您收到一条提示“知道了”的提示，那么它会起作用。

感谢您的帮助。

【问题讨论】：

是的，不起作用。那么这真的是一个问题还是只是一个陈述？我宁愿看到您将此作为错误提交给 jQuery 开发人员或浏览器开发人员。
谢谢，我也怀疑这是一个错误。对不起，不清楚的问题。我刚刚编辑了它。

标签： jquery css cross-browser rotation

【解决方案1】：

好的，我找到了问题所在。问题出在我的代码上，没有正确检查来自 css() getter 的返回值。

在我有之前：

if (value === undefined) {...

通过将上述条件更改为：

if (notDefined(value)) {...

notDefined 是函数

var notDefined = function(value) {
    return value == null || value == undefined || value == "" || value == "none";
}

要成为跨浏览器，我需要与所有这 3 种情况进行比较，而不仅仅是未定义。

你可以看到更新here

它适用于所有最新版本的 IE（也包括 IE7 和 8）、Firefox、Safari、Chrome 和 Opera。

【讨论】：

啊，是的。我应该看到的！为什么不采取适当的跨浏览器友好方式呢？ if (typeof varName === "undefined") { ... }