html - 输入提交在谷歌浏览器中不起作用

Question

Google Chrome 浏览器中的Form 和input 不能正常使用，但是当我打开Firefox 浏览器时，它可以正常使用。设计结构在 Google Chrome 浏览器中完全崩溃。窗体和按钮的高度太高。请帮助我。

<form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-380" method="post" data-id="380" data-name="cdb_subscribe_form">
<div class="mc4wp-form-fields">
    <div class="newsletter-form">
        <input class="form-control" type="email" name="EMAIL" placeholder="enter email" required="">
        <input type="submit" value="submit">
        <p>
        </p>
    </div>
</div>
<label style="display: none !important;">Leave this field empty if you're human:
    <input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off">
</label>
<input type="hidden" name="_mc4wp_timestamp" value="1554918468">
<input type="hidden" name="_mc4wp_form_id" value="380">
<input type="hidden" name="_mc4wp_form_element_id" value="mc4wp-form-1">
<div class="mc4wp-response"></div>

.newsletter-form {
  position: relative;
  display: -ms-flexbox;
  display: flex;
}

.newsletter-form:before {
  content: "\f003";
  font-family: 'FontAwesome';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 46px;
  pointer-events: none;
  color: #c7cedf;
  font-size: 16px;
  text-align: center;
  z-index: 1;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.newsletter-form .form-control {
  position: relative;
  width: 100%;
  line-height: 1;
  padding-left: 44px;
  border-radius: 0;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  border-radius: 0 10px 10px 0;
}

.newsletter-form input[type=submit] {
  border-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  height: 100%;
  -webkit-box-shadow: none;
  box-shadow: none;
}

Image

Answer 1

这里所有的CSS

        *,
    *::before,
    *::after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        text-align: left;
        background-color: #fff;
    }

    html {
        font-family: sans-serif;
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        -ms-overflow-style: scrollbar;
        -webkit-tap-highlight-color: transparent;
    }

    label {
        display: inline-block;
        margin-bottom: 0.5rem;
    }

    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    font,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td {
        border: 0;
        font-family: inherit;
        font-size: 100%;
        font-style: inherit;
        font-weight: inherit;
        margin: 0;
        outline: 0;
        padding: 0;
        vertical-align: baseline;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .footer-widgets .widget {
        margin-top: 40px;
    }

    .footer-widgets:first-child.widget,
    .footer-widgets .widget.widget_contacts {
        margin-top: 0px;
    }

    .footer-widgets .footer-widget-col {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
    /* @media all and (min-width:992px) */

    .footer-three-col .footer-widget-col {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33%;
    }

    .footer-widgets .footer-widgets-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    .footer-widgets {
        padding: 6em 0;
    }

    .container,
    .vc-container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
    /* @media all and (min-width:576px) */

    .container,
    .vc-container {
        max-width: 540px;
    }
    /* @media all and (min-width:768px) */

    .container,
    .vc-container {
        max-width: 720px;
    }
    /* @media all and (min-width:992px) */

    .container,
    .vc-container {
        max-width: 960px;
    }
    /* @media all and (min-width:1200px) */

    .container,
    .vc-container {
        max-width: 1230px;
    }

    article,
    aside,
    dialog,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    nav,
    section {
        display: block;
    }

    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    nav,
    section {
        display: block;
    }

    .site-footer {
        background-color: #222e59;
    }

    .site-footer {
        background-color: #2e3e77;
    }

    .site-footer.footer-color-light {
        color: rgba(255, 255, 255, 0.6);
    }

    .wrap {
        position: relative;
        background-color: #fff;
        word-wrap: break-word;
    }

    .wrap {
        -webkit-transition: all .5s;
        transition: all .5s;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }

    input,
    button,
    select,
    optgroup,
    textarea {
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    button,
    input {
        overflow: visible;
    }

    body,
    *:not(.wp-core-ui) button,
    input,
    select,
    textarea {
        line-height: 1.5;
    }

    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    html,
    body {
        background-color: #fff;
    }

    body {
        font-family: "Nunito", Arial, sans-serif;
        color: #7d7e7f;
        font-size: 15px;
        line-height: 1.75rem;
        overflow-x: hidden;
    }

    body {
        font-family: Raleway;
        color: #7d7e7f;
        font-size: 15px;
    }

    label {
        display: block;
        color: #6c757d;
        padding-bottom: 3px;
    }

    button,
    input,
    select,
    textarea {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 100%;
        margin: 0;
        max-width: 100%;
        vertical-align: baseline;
    }

    button,
    input {
        line-height: normal;
    }

    input,
    textarea {
        background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    }

    input[type='text'],
    input[type='password'],
    input[type='number'],
    input[type='date'],
    input[type='datetime'],
    input[type='datetime-local'],
    input[type='time'],
    input[type='month'],
    input[type='week'],
    input[type='email'],
    input[type='search'],
    input[type='tel'],
    input[type='url'],
    input.input-text,
    select,
    textarea {
        width: 100%;
        font-family: inherit;
        font-weight: inherit;
        line-height: 1.6;
        outline: 0;
        padding: 8px 10px;
        border: 1px solid #dcdcdc;
        -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .06);
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.06);
        border-radius: 2px;
        -webkit-appearance: none;
        -webkit-transition: all .2s;
        transition: all .2s;
    }

    .newsletter-form {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .newsletter-form .form-control {
        position: relative;
        width: 100%;
        line-height: 1;
        padding-left: 44px;
        border-radius: 0;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
    }

    button,
    html [type='button'],
    [type='reset'],
    [type='submit'] {
        -webkit-appearance: button;
    }

    button,
    html input[type='button'],
    input[type='reset'],
    input[type='submit'] {
        -webkit-appearance: button;
        cursor: pointer;
    }

    .btn,
    input[type='button'],
    input[type='reset'],
    input[type='submit'],
    .button,
    .button-secondary,
    .woocommerce_message .button,
    .woocommerce-message .button,
    .event-single-side a.event_register_submit,
    .event_register_submit {
        text-align: center;
        border: 0;
        border-radius: 50px;
        padding: 9px 22px;
        vertical-align: bottom;
        text-shadow: none;
        line-height: 27px;
        display: inline-block;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    .btn-filled,
    .top-bar-cart .dropdown-cart .woocommerce-mini-cart__buttons a:first-child,
    input[type='button'],
    input[type='reset'],
    input[type='submit'],
    .button,
    .button-secondary,
    .woocommerce_message .button,
    .woocommerce-message .button {
        color: #fff;
        background-color: #f9a134;
    }

    input[type='button'],
    input[type='reset'],
    input[type='submit'],
    .button,
    .button-secondary,
    .woocommerce_message .button,
    .woocommerce-message .button {
        font-weight: inherit;
    }

    .sk-cube-grid .sk-cube,
    .main-sidebar-holder .widget .widget-title::before,
    .page-pagination > span,
    .btn-filled,
    .top-bar-cart .dropdown-cart .woocommerce-mini-cart__buttons a:first-child,
    input[type=button],
    input[type=reset],
    input[type=submit],
    .button,
    .button-secondary,
    .woocommerce_message .button,
    .woocommerce-message .button,
    .studiare-social-links.rounded li a.custom:hover,
    ul.page-numbers .page-numbers.current,
    ul.page-numbers .page-numbers:hover,
    .page-numbers.studiare_wp_link_pages > .page-number,
    .studiare-event-item .studiare-event-item-holder .event-inner-content .date-holder .date::before,
    .studiare-event-item .studiare-event-item-holder .event-inner-content .date-holder .date::after,
    .product-reviews .product-review-title .inner::after,
    .product-reviews-stats .detailed-ratings .detailed-ratings-inner .course-rating .bar .bar-fill,
    .owl-dots .owl-dot.active span,
    .double-bounce1,
    .double-bounce2 {
        background-color: #f9a134;
    }

    .newsletter-form input[type=submit] {
        border-radius: 0;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        height: 100%;
        -webkit-box-shadow: none;
        box-shadow: none;
    }