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

我有以下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;
}

---

我可以看到一个直接的问题，它过去曾给我带来问题：

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

百分比值将缩放，像素将保持原样。页面不会按比例缩放，在某些情况下，您应该将值、运气包括在页面看起来不错的原因中

只要您继续使用这种方法，当缩放级别更改时，您的弹出窗口将被“切断”

你试过用EM测量吗？或者——更简单的选择——您是否尝试过使用纯CSS或Twitter引导程序？使用这两个包中的任何一个都可以得到您想要的。你甚至不需要用勺子把眼睛挖出来。CSS开发并不好，即使在18年以上的时间之后

---

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

给出的代码执行得非常完美。页面中的其他内容似乎有问题

---

特别是，看一看你的孩子的父母。这可能会影响模态的显示。

您能否共享模态中使用的下拉列表样式等？我在我的Chrome浏览器中使用了该代码。看起来很好用。你在用哪个浏览器？你能试着在chrome上运行这个要点并告诉我它是如何工作的吗？这太奇怪了。。。当我单独运行页面时，效果很好，但当我将整个CSS复制到页面时，它会被切断：/Good progress then。。。现在我们知道还有其他的东西，很可能是你的模态的父母，对这种行为负责。是否可以为modal的父级共享html、css？我有一些JQuery导致了这个问题。我得仔细检查一下。谢谢你每当我在我的页面中添加脚本标签时，弹出窗口就会被切断。。。你能帮忙吗？@SiKni8那么你试图添加的脚本就是罪魁祸首。如果可能的话，你能分享这个脚本吗？我会分享整个页面的HTML：如果我完全删除脚本标签，它可以正常工作，但是一旦我添加JQuery代码，我的弹出窗口就会被剪掉，请让我知道你的想法……看起来像是一些奇怪的行为。换成，它就可以正常工作了。我总是被引导认为这等于

@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;
        }
        }