Question

我有以下HTML / CSS：

<div id="modal">
    <div class="modal-content">
        <div class="header">
            <h2>Add Item to Your Shopping Cart</h2>
        </div>
        <div class="copy">
            <label>Item:</label>
            <select id="itemChoice">
                <option value="Wine" selected>Wine</option>
                <option value="Shot">Shot</option>
                <option value="Beer">Beer</option>
            </select>
            <br /><span id="spanPrice" />
            TESTING

        <label>Quantity:</label>
        <input type="text" id="rname" name="email" placeholder="Jane Doe">

        <label>Price:</label>
        <input type="text" id="email" name="contact" placeholder="name@email.com">

        </div>
        <div class="cf footer">
            <a href="#" class="btn">Close</a>
        </div>
    </div>
    <div class="overlay"></div>
</div>

<a href="#modal" class="btn go">Activate Modal</a>

/* Normal styles for the modal */
#modal {
    left:50%;
    margin:-250px 0 0 -40%;
    opacity: 0;
    position:absolute;
    top:-50%;
    visibility: hidden;
    width:80%;
    box-shadow:0 3px 7px rgba(0,0,0,.25);
    box-sizing:border-box;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}
    /* Make the modal appear when targeted */
    #modal:target {
        opacity: 1;
        top:50%;
        visibility: visible;
    }
#modal .header,#modal .footer {
    border-bottom: 1px solid #e7e7e7;
    border-radius: 5px 5px 0 0;
}
    #modal .footer {
        border:none;
        border-top: 1px solid #e7e7e7;
        border-radius: 0 0 5px 5px;
    }
#modal h2 {
    margin:0;
}
#modal .btn {
    float:right;
}
#modal .copy,#modal .header, #modal .footer {
    padding:15px;
}
.modal-content {
    background: #f7f7f7;
    position: relative;
    z-index: 20;
    border-radius:5px;
}
#modal .copy {
    background: #fff;
}

#modal .overlay {
    background-color: #000;
    background: rgba(0,0,0,.5);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

为什么弹出窗口会切断剩下的标签：

enter image description here

弹出式：

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
        @import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
        * {

        /*with these codes padding and border does not increase it's width.Gives intuitive style.*/

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        }

        body {
        margin:0;
        padding:0;
        font-family: 'Droid Sans', sans-serif;

        }
        div#envelope{
        width:100%;
        margin: 10px 0 10px 0;
        background-color:#f2f4fb;
        padding:10px 0;
        border:1px solid gray;
        border-radius:5px;
        }

        form{
        width:70%;
        margin:0 15%;
        }

        form header {
        text-align:center;
        font-family: 'Roboto Slab', serif;
        }

        /* Makes responsive fields.Sets size and field alignment.*/
        input[type=text], #itemChoice{
        margin-bottom: 20px;
        margin-top: 10px;
        width:100%;
        padding: 15px;
        border-radius:5px;
        border:1px solid #7ac9b7;
        }

        #additem
        {
        margin-bottom: 20px;
        width:100%;
        padding: 15px;
        border-radius:5px;
        border:1px solid #7ac9b7;
        background-color:rgb(164, 230, 219);
        }
        #addToTable
        {
        margin-bottom: 20px;
        width:50%;
        padding: 15px;
        border-radius:5px;
        border:1px solid #7ac9b7;
            background-color:rgb(164, 230, 219);
        }
        #cancelAdd {
            margin-bottom: 20px;
            width:50%;
            padding: 15px;
            border-radius:5px;
            border:1px solid #B0B8B6;
        background-color:#BBCBC8;
        }
        textarea{
        width:100%;
        padding: 15px;
        margin-top: 10px;
        border:1px solid #7ac9b7;
        border-radius:5px;
        margin-bottom: 20px;
        resize:none;
        }

        input[type=text]:focus,
        textarea:focus {
        border-color: #4697e4;
        }

        /* By using @ media form can have different layout for screen, mobile phone, tablet.*/

        /* Sets the form layout for mobile phone, tablet*/
        @media screen and (max-device-width: 600px){

        @import url(http://fonts.googleapis.com/css?family=Droid+Sans);
        @import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
        * {

        /*with these codes padding and border does not increase it's width.Gives intuitive style.*/

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        }

        body {
        margin:0;
        padding:0;
        font-family: 'Droid Sans', sans-serif;

        }
        div#envelope{
        width:50%;
        margin: 10px 30% 10px 25%;
        background-color:#f2f4fb;
        padding:10px 0;
        border:1px solid gray;
        border-radius:10px;
        }

        form{
        width:70%;
        margin:0 15%;
        }

        form header {
        text-align:center;
        font-family: 'Roboto Slab', serif;
        }

        /* Makes responsive fields.Sets size and field alignment.*/
        input[type=text], #itemChoice{
        margin-bottom: 20px;
        margin-top: 10px;
        width:100%;
        padding: 15px;
        border-radius:5px;
        border:1px solid #7ac9b7;
        }

        #additem
        {
        margin-bottom: 20px;
        width:100%;
        padding: 15px;
        border-radius:5px;
        border:1px solid #7ac9b7;
        background-color:rgb(164, 230, 219);
        }
        #addToTable
        {
        margin-bottom: 20px;
        width:50%;
        padding: 15px;
        border-radius:5px;
        border:1px solid #7ac9b7;
            background-color:rgb(164, 230, 219);
        }
        #cancelAdd {
            margin-bottom: 20px;
            width:50%;
            padding: 15px;
            border-radius:5px;

            border:1px solid #B0B8B6;
        background-color:#BBCBC8;
        }
        textarea{
        width:100%;
        padding: 15px;
        margin-top: 10px;
        border:1px solid #7ac9b7;
        border-radius:5px;
        margin-bottom: 20px;
        resize:none;
        }

        input[type=text]:focus,
        textarea:focus {
        border-color: #4697e4;
        }
        }

Answer 1

我可以看到一个直接导致我过去问题的问题：

混合单位 - 像素和百分比 - 不起作用。您以百分比形式测量宽度，然后以像素为单位添加边距/填充。

百分比值将缩放，像素将保持不变。该页面不会按比例缩放，您应该包含值，＆＃34;运气＆＃34;在某些情况下它看起来很好的原因。

只要您继续使用此方法，您的弹出窗口就会被切断＆＃39;当缩放级别改变时。

您是否尝试过EM测量？或者 - 更简单的选择 - 您是否尝试过使用Pure CSS或Twitter Bootstrapper？使用这两个包中的任何一个都可以获得您想要的。你甚至不需要用勺子去除你的眼睛。即使在18年以上，CSS开发也不是很好。

注意：我甚至没有在IDE中尝试此代码。

Answer 2

给出的代码完美执行。看起来您网页上的其他内容存在问题。

特别是，看看你的模态的父级。这可能会影响模态的显示。

为什么弹出窗口的某些部分会被切断

2 个答案: