Mozilla jquery css(“height”,var +“px”)不起作用

时间:2017-05-18 09:30:04

标签: jquery html

我正在做一些像演示div这样的思考,并用JQuery给他100%的监视器高度。 在Google Chrome中,一切都很完美,但是mozilla给它的高度值很差。

JQuery的

var active = "uvod";
var menuHM = 100;
function startupMc() {
    $(document).ready(function() {
        var winHeight = $(window).height();
        var winWidth = $(window).width();
        var mainHeight = $("#main").height();
        $("#main").css({height: winHeight + "px"});
        $("#main").children("img").eq(0).css({marginLeft: winWidth / 2 - 250 + "px"});
        $("#main").children("img").eq(0).css({marginTop: winHeight / 2 - mainHeight * 2 + "px"});
        $("#main").children("img").eq(0).slideDown(1000);
        $("#content").css("height", winHeight - menuHM + "px");
    });
}
function dale() {
    $("#content").show();
    $("#uvod").show();
    $("#menu").show();
    $("#uvod").load("main.php");
    $("html, body").clearQueue();
    $("html, body").animate({
        scrollTop: ($("#content").offset().top)
    }, 1000);
    $("#main").slideUp(1000);
    $("#vip").load("vip.php");
    $("#ateam").load("ateam.php");
    $("#prava").children("#odstup").load("prava.php");
    $("html, body").delay().queue(function(next) { $(this).css({overflowY: "auto"}); next() });
    $("#menu").delay(1000).queue(function(next) { $(this).css({position: "fixed"}) });
    $("#content").delay(1000).queue(function(next) { $(this).css({marginTop: menuHM}) });
}
function slideDiv(div) {
    if(div != active) {
        $("html, body").clearQueue();
        $("html, body").animate({
            scrollTop: ($("#content").offset().top)
        }, 1000);
        $("#" + active).clearQueue();
        $("#" + div).clearQueue();
        $("#" + active).hide("slide", { direction: "left" }, 800);
        $("#" + div).delay(900).show("slide", { direction: "right" }, 800);
        active = div;
    }
}
$(window).resize(function() {
    var winHeight = $(window).height();
    var winWidth = $(window).width();
    var mainHeight = $("#main").height();
    $("#main").css({height: winHeight + "px"});
    $("#main").children("img").eq(0).css({marginLeft: winWidth / 2 - 250 + "px"});
    $("#main").children("img").eq(0).css({marginTop: winHeight / 2 - 216 / 2 + "px"});
    $("#content").css("height", winHeight - menuHM + "px");
});

HTML

<div id="main" class="mc">
    <img src="../images/HellGaming.png" />
    <center>
        <button onClick="window.location('../');">Zpět</button>
        <button id="dale" onClick="dale();">Dále ➯</button>
    </center>
</div>
<div id="menu">
    <ul>
        <li onClick="slideDiv('uvod');"><a>Hlavní stránka</a></li>
        <li onClick="slideDiv('vip');"><a>VIP</a></li>
        <li onClick="slideDiv('ateam');"><a>ATeam</a></li>
    </ul>
</div>
<div id="content">
    <div id="leva">
        <div id="odstup">
            <div id="uvod">
            </div>
            <div id="vip">
            </div>
            <div id="ateam">
            </div>
        </div>
    </div>
    <div id="prava">
        <div id="odstup">
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        startupMc();
    });
</script>

提前感谢您的回复!

1 个答案:

答案 0 :(得分:0)

好的,我明白了。

问题出在header.php。

当我们创建html结构时,我们必须编写&lt;!DOCTYPE HTML &gt;

我在doctype中没有'html',所以把它放进去就可以了。

此外,我发现我们无法将html5 放入doctype。

希望有帮助,当遇到同样问题的人找到这篇文章时。

感谢您的回答!