html - Different container height on Firefox, when child element has moved top outside container -


i have container (overflow:hidden;) child element witch have height: 2000px; top: -1000px;. in chrome basic container has 1000px height. can see bottom part of child element , top 1000px part hidden outside viewport. problem on firefox. top part of child element hidden - on chrome, basic container has 2000px height. there trick can use ff container height 1000pz in chrome?

edit: 1000px , 2000px example height - real height of elementsare dynamic , depend on window.height.

assuming want different css different browsers, here useful bit of javascript use. since have not provided html, wont able further can not see css affecting different browsers.

    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) {                 (var = 0; < 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 using " + browserdetect.browser + " version " + browserdetect.version);              $('html').addclass("browser-"+browserdetect.browser);         $('html').addclass("version-"+browserdetect.version); }; 

by calling browserdetect() on load, allow write custom css browser type or version. need add class .browser-firefox before css class , apply browser.


Comments