html - 当子元素移到容器顶部时，Firefox 上的容器高度不同

Question

我有容器 (overflow:hidden;)，子元素有 height: 2000px;顶部:-1000 像素；。在 Chrome 中，我的基本容器有 1000px 高度。我可以看到子元素的底部和顶部 1000px 部分隐藏在视口(viewport)之外。问题出在 Firefox 上。子元素的顶部是隐藏的——就像在 Chrome 上一样，但我的基本容器有 2000 像素的高度。有什么技巧可以让 FF 容器高度像 Chrome 中那样设置为 1000pz？

编辑:1000px 和 2000px 是示例高度 - 元素的实际高度是动态的，取决于 window.height。

Answer 1

假设您想要为不同的浏览器使用不同的 CSS，这里是我使用的一段有用的 JavaScript。由于您没有提供任何 HTML，我们无法进一步帮助您，因为我们看不到 CSS 可能在哪些地方影响不同的浏览器。

    function browserDetect (){
    var BrowserDetect = {
            init: function () {
                this.browser = this.searchString(this.dataBrowser) || "Other";
                this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
            },
            searchString: function (data) {
                for (var i = 0; i < data.length; i++) {
                    var dataString = data[i].string;
                    this.versionSearchString = data[i].subString;

                    if (dataString.indexOf(data[i].subString) !== -1) {
                        return data[i].identity;
                    }
                }
            },
            searchVersion: function (dataString) {
                var index = dataString.indexOf(this.versionSearchString);
                if (index === -1) {
                    return;
                }

                var rv = dataString.indexOf("rv:");
                if (this.versionSearchString === "Trident" && rv !== -1) {
                    return parseFloat(dataString.substring(rv + 3));
                } else {
                    return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
                }
            },

            dataBrowser: [
                {string: navigator.userAgent, subString: "Chrome", identity: "chrome"},
                {string: navigator.userAgent, subString: "MSIE", identity: "explorer"},
                {string: navigator.userAgent, subString: "Trident", identity: "explorer"},
                {string: navigator.userAgent, subString: "Firefox", identity: "firefox"},
                {string: navigator.userAgent, subString: "Safari", identity: "safari"},
                {string: navigator.userAgent, subString: "Opera", identity: "opera"}
            ]

        };

        BrowserDetect.init();
        //console.log("You are using " + BrowserDetect.browser + " with version " + BrowserDetect.version);     
        $('html').addClass("browser-"+BrowserDetect.browser);
        $('html').addClass("version-"+BrowserDetect.version);
};

通过在加载时调用 browserDetect()，这将允许您为任何浏览器类型或版本编写自定义 CSS。现在您需要做的就是在您的 CSS 类之前添加一个类 .browser-firefox，它会将它应用于该浏览器。