Question

我有容器（overflow：hidden;），子元素有height: 2000px; top: -1000px;。在Chrome中，我的基本容器的高度为1000像素。我可以看到子元素的底部和顶部1000px部分隐藏在视口外。问题出在Firefox上。子元素的顶部隐藏 - 就像在Chrome上一样，但我的基本容器的高度为2000像素。有没有什么技巧可以用于FF容器高度是1000pz像Chrome一样？

编辑：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，它将把它应用于该浏览器。

Answer 2

无法使用您提供的信息重现您的问题。

也许您可以使用此示例在CSS上找到一些错误？

也许你忘了指定外盒的高度？

使用此HTML：

<div class="outer">
    <div class="inner">

    </div>
</div>

和CSS：

.inner
{
    position: relative;
    height: 200px;
    top: -101px;
    border-bottom: 1px solid #ff00ff;
}

.outer
{
    border: 1px solid #FF0000;
    height: 100px;
    overflow: hidden;
}

（http://jsfiddle.net/dr7ztoz5/1/）

正如您所看到的，代码就像魅力一样 - 在我自己的Firefox，Chrome，IE，Safari，Opera中经过测试。：）

Firefox上的不同容器高度，当子元素移动到容器外部时

2 个答案: