ASPROM页面在CHROME中添加了javascript和少量CSS之后以110％的缩放比例打开

Question

我有一个用于项目的登录页面，之前该页面工作正常。后来，我应该添加一个弹出窗口，但是在那之后，我项目的所有页面在GOOGLE CHROME中以110％或某个缩放级别打开，直到我不再将其大小调整为100％。由于没有响应，这完全破坏了设计。这是用于弹出结构的asp代码。

<div id="pop" class="faded">
        <asp:LinkButton ID="liClose" CssClass="close" runat="server" OnClientClick="popForDownload()" OnClick="liClose_Click"><i class="fa fa-close"></i></asp:LinkButton>

        <asp:TextBox ID="txtU" CssClass="popText" placeholder="username" runat="server" Width="45em"></asp:TextBox>
        <%--<asp:RegularExpressionValidator ValidationGroup="popVal" ID="revE" CssClass="v" ControlToValidate="txtE" ValidationExpression="^\d{12}$" ErrorMessage="Invalid Enrollment number!" ForeColor="#ff0000" Display="Dynamic" runat="server"></asp:RegularExpressionValidator>--%>
        <br />
        <asp:TextBox ID="txtP" CssClass="popText" placeholder="password" TextMode="Password" runat="server" Width="45em"></asp:TextBox>
        <%--<asp:RegularExpressionValidator ValidationGroup="popVal" ID="revP" CssClass="v" ControlToValidate="txtP" ValidationExpression="^[\s\S]{8,}$" ErrorMessage="Password should contain minimum 8 characters!" ForeColor="#ff0000" Display="Dynamic" runat="server"></asp:RegularExpressionValidator>--%>

        <asp:DropDownList ID="ddlT" runat="server" CssClass="ddl" AutoPostBack="true">

        </asp:DropDownList>
        <asp:DropDownList ID="ddlF" runat="server" CssClass="ddl" AutoPostBack="true">

        </asp:DropDownList>
        <asp:DropDownList ID="ddlP" runat="server" CssClass="ddl" AutoPostBack="true">

        </asp:DropDownList>

        <asp:LinkButton ID="liAccepted" CausesValidation="false" CssClass="li" runat="server"><i class="fa fa-download"> </i>Accepted Updates</asp:LinkButton>
        <asp:LinkButton ID="liDeclined" CausesValidation="false" CssClass="li" runat="server"><i class="fa fa-download"> </i>Declined Updates</asp:LinkButton>
        <asp:LinkButton ID="liBoth" CausesValidation="false" CssClass="li" runat="server" ><i class="fa fa-download"> </i>Full Update Chart</asp:LinkButton>
    </div>

这里是css。 （以下元素很少来自页面的其余部分，我在创建此弹出窗口时做了一些更改，以后再说！）]] >>

    #btnAFacultyLogin {
    position: absolute;
    float: right;
    top: 5em;
    right: 15.5em;
}

#btnAStudentLogin {
    position: absolute;
    float: right;
    top: 5em;
    right: 4em;
}

#btnALogin {
    position: absolute;
    float: left;
    bottom: 10em;
    left: 46em;
}


#tblALogin {
    position: absolute;
    float: left;
    top: 11em;
    left: 28em;
}

#ti {
    position: absolute;
    float: left;
    left: 8.6em;
}

.dl {
    position: absolute;
    float: left;
    left: 3em;
    height: 5.5em;
    width: 5.5em;
    outline: none;
    top: 15px;
}

.faded {
    position: absolute;
    float: left;
    top: 7em;
    bottom: 4.3em;
    left: 15em;
    right: 15em;
    border-radius: 3em;
    background-color: rgba(255,255,255,0.65);
    transition: opacity 1s ease;
    visibility: hidden;
    text-align: center;
    text-justify: inter-word;
}

.appear {
    visibility: visible;
    animation: fadeIn 2s;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.close {
    position: absolute;
    float: right;
    top: 0.3em;
    right: 0.8em;
    font-size: 2em !important;
    color: rgba(0, 0, 0, 0.34);
}

    .close:hover {
        color: rgba(0, 0, 0, 0.54);
    }

    .close:focus {
        color: rgba(0, 0, 0, 0.54);
    }

.popText {
    position: absolute;
    float: left;
    left: 3.2em;
    height: 1.5em;
    padding: 0.35em;
    border-radius: 0.7em;
    outline: none;
    border: 0.14em solid rgba(0,0,0,0);
    background-color: rgba(255,255,255,1);
}

    .popText:focus {
        border-color: rgb(255, 242, 0);
    }

.v {
    position: absolute;
    float: left;
    left: 25em;
    font-size: 0.85em !important;
    font-family: 'Microsoft JhengHei UI';
}

#txtU, #revU {
    top: 1.5em;
}

#txtP, #revP {
    top: 5em;
}

.li {
    position: absolute;
    float: left;
    border: 0.2em solid rgb(255, 242, 0);
    padding: 1em 1em;
    font-size: 1.1em !important;
    font-family: 'Microsoft JhengHei UI';
    border-color: rgb(255, 242, 0);
    color: rgb(255, 242, 0);
    width: 8em;
    text-decoration: none;
    border-radius: 1.5em;
    background-color: white;
    bottom: 2em;
}

    .li:hover {
        background-color: rgb(255, 242, 0);
        color: white;
    }

    .li:focus {
        background-color: rgb(255, 242, 0);
        color: white;
    }

#liAccepted {
    left: 2em;
}

#liDeclined {
    left: 19.8em;
}

#liBoth {
    right: 2em;
}


.ddl {
    position: absolute;
    left: 3.2em;
    font-family: 'Microsoft JhengHei UI';
    color: rgb(95, 95, 95);
    /*margin: 0.5em 0em 1.8em 0em;*/
    /*margin-left: 0em;
    margin-top: 2em;*/
    padding: 0.6em 4em;
    border-radius: 0.7em;
    border: 0.2em solid rgb(95, 95, 95);
    background-color: rgba(139, 139, 139, 0.10) !important;
}

    .ddl:hover {
        color: rgb(87, 82, 0);
        background-color: rgba(87, 82, 0, 0.10);
        border-color: rgb(87, 82, 0);
    }

    .ddl:focus {
        color: rgb(255, 242, 0);
        outline: none;
        background-color: rgba(255, 242, 0, 0.10);
        border-color: rgb(255, 242, 0);
    }

#ddlT {
    top: 8.5em;
}

#ddlF {
    top: 12em;
}

#ddlP {
    top: 15.5em;
}

这是我使用的javascript：

    <script>
    //document.body.style.zoom = 1.0;
    //var scale = 'scale(1)';
    //document.body.style.webkitTransform = scale;
    //document.body.style.msTransform = scale;
    //document.body.style.transform = scale;

    function popForDownload() {
        document.getElementById("pop").classList.toggle("appear");
    }
</script>
我知道这太过分了，但是我已经尝试了2天的解决方案，如果可以的话，我会把它缩短。还是谢谢你。

我有一个用于项目的登录页面，之前该页面工作正常。后来，我应该添加一个弹出窗口，但是之后，我项目的所有页面都以110％或在...

Answer 1

我从CSS中删除了text-justify: inter-word;，并将浏览器重置为默认值。现在工作正常。