Question

我会尝试解释发生了什么...... 如果选择了适当的选择选项，我会显示一个额外的div。在Firefox中工作得很好，但是在Chrome或Safari中显示额外的div时，页脚会保持原来的位置（当显示额外的div时，它不在底部，而是在页面的中间）

我认为有一些webkit要添加..

以下是一个示例，尝试在Safari或Firefox中打开它。如果输出窗口很小，它应该有所不同。

Jsfiddle

<style>
    html, body {
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        padding: 0;
        position: relative;
        width: 100%;
    }
    body {
        display: -webkit-flex;
        /* Safari */
        -webkit-flex-direction: column;
        /* Safari 6.1+ */
        display: flex;
        flex-direction: column;
    }
    .content {
        background-color: #f7f7f7;
        clear: both;
        min-height: 250px;
        padding: 20px 10%;
    }
</style>
<script>
    $(document).ready(function () {
        $("#extra_div").hide();
    });


    $('.selectpicker').change(function () {

        if ($(this).val() == '3') {
            $("#extra_div").show();
        } else {
            $("#extra_div").hide();
        }


    })
</script>

<body>
    <div id="okvir_registracije" style="background-color: #f7f7f7;margin-top: 73px; -webkit-flex: 1; -ms-flex: 1; flex: 1;">
        </br>
        <div class="content" id="login_content">
            <form name="registration" class="registration" method="post" id="form_login" onsubmit="return validateForm();">
                <fieldset style="background: white">
                    <label style="margin-left: 10px">Choose one:</label>
                    <select class="selectpicker" name="tip_uporabnika" id="tip_uporabnika" for="tip_uporabnika" onchange="show_div()">
                        <option value="1" selected="selected">izberi tip uporabnika</option>
                        <option value="3">Uporabnik</option>
                    </select>
                    <div id="extra_div">
                        </br>
                        <label style="margin-left: 10px" for="ime">Test 2</label>
                        </br>
                        <label style="margin-left: 10px">Test</label>
                        <select class="selectpicker" name="tip_uporabnika" id="tip_uporabnika" for="tip_uporabnika" onchange="show_div()">
                            <option value="1" selected="selected">izberi tip uporabnika</option>
                            <option value="2">Uporabnik</option>
                            <option value="3">Lastnik</option>
                        </select>
                        </br>
                        <label style="margin-left: 10px" for="ime">Name</label>
                        <input type="text" id="firstname" name="firstname" placeholder="vaše ime...">
                        <br/>
                        <label style="margin-left: 10px" for="priimek">Surname</label>
                        <input type="text" id="lastname" name="lastname" placeholder="vaš priimek...">
                        <br/>
                        <label style="margin-left: 10px" for="username">Example</label>
                        <input type="text" id="username" name="username" placeholder="vaše uporabniško ime...">
                        <br/></br>
                        <label style="margin-left: 10px" for="ime">Name</label>
                        <input type="text" id="firstname" name="firstname" placeholder="vaše ime...">
                        <br/>
                        <label style="margin-left: 10px" for="priimek">Surname</label>
                        <input type="text" id="lastname" name="lastname" placeholder="vaš priimek...">
                        <br/>
                        <label style="margin-left: 10px" for="username">Example</label>
                        <input type="text" id="username" name="username" placeholder="vaše uporabniško ime...">
                        <br/></br>
                        <label style="margin-left: 10px" for="ime">Name</label>
                        <input type="text" id="firstname" name="firstname" placeholder="vaše ime...">
                        <br/>
                        <label style="margin-left: 10px" for="priimek">Surname</label>
                        <input type="text" id="lastname" name="lastname" placeholder="vaš priimek...">
                        <br/>
                        <label style="margin-left: 10px" for="username">Example</label>
                        <input type="text" id="username" name="username" placeholder="vaše uporabniško ime...">
                        <br/>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
    <hr>
    <div id="footer" style="padding: 15px 0;text-align: center;width: 100%;height:25px;">&copy; Company | info@company.si</div>
</body>

我希望这足以找出造成这种奇怪行为的原因。正如我所说，它在Firefox中运行正常，但在Chrome和Safari中无效。

以下是Safari中的外观图像：

enter image description here

JQuery Show功能破坏了Chrome和Safari中的页面样式

0 个答案: