html - 按钮只能部分点击错误

Question

我有一个非常奇怪的错误，我无法弄清楚为什么按钮的整个“红色区域”都不可点击。

下面附上了所发生情况的图像。

当我移动到发送中的 D 字符时，它立即变得不可点击。在整个红色区域中，D 字符右侧的所有内容都不可点击。

整个表单的 HTML 如下。这是使用 React 完成的，所以我包含了该代码以防万一它出于某种原因相关。

import React, { Component } from 'react';
import { FormGroup, FormControl, Button } from "react-bootstrap";
import MaskedFormControl from 'react-bootstrap-maskedinput'

export default class defaultHomeForm extends Component {

    render(){
      return(
        <form onSubmit={this.props.handleSubmit}>
          <FormGroup
            controlId="formName"
            validationState={this.props.formValidation("name")}
            className="quote-fields"
          >
              <FormControl
                type="text"
                name="name"
                placeholder="Name"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <FormGroup
            controlId="formPhone"
            validationState={this.props.formValidation("phone")}
            className="quote-fields"
          >
              <MaskedFormControl
                type='text'
                name='phone'
                mask='(111)-111-1111 x11111'
                placeholder="Phone"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <FormGroup
            controlId="formEmail"
            validationState={this.props.formValidation("email")}
            className="quote-fields"
          >
              <FormControl
                type="email"
                name="email"
                placeholder="Email"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <FormGroup
            controlId="formAddress"
            validationState={this.props.formValidation("address")}
            className="quote-fields"
          >
              <FormControl
                type="text"
                name="address"
                placeholder="Address"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <div className="send-btn"><Button type="submit"><div className="send-btn-text">Send <i className="fa fa-angle-right"></i><i className="fa fa-angle-right"></i></div></Button></div>
        </form>
    );
  }
}

显然 CSS 是查找这些错误的第一个地方，因此我在此处附上了我的 SCSS 文件中相关的部分。

%send-btn {
    padding: 5px;
    .send-btn-text{
      background-color:red;
    }
    .btn {
        background: transparent;
        border: none;
        font-size: 25px;
        font-weight: 500;
        color: #fff;
        text-transform: uppercase;
        display: flex;
        align-items: center;

        &:hover{
            color: #1899d1;
        }
        i {
            &:first-child {
                padding-left: 5px;
            }
        }

    }
}

%quote-fields {
    padding: 0px 15px 10px;
    margin: 0px;

    .form-field {
        background: transparent;
        padding: 12px;
        height: 43px;
        margin-bottom: 12px;
        color: #ffffff;
        border-radius: 2px;
        border: 1px solid #dcdcdc78;
    }
}

如果我遗漏了您需要查看的任何其他 SCSS/CSS，请告诉我，我会立即上传。

我尝试过的事情:

我曾尝试将显示更改为内联 block 而不是 flex，但没有用。 我已经尝试为控件添加宽度，但仍然不行。

我不确定是什么导致了这种奇怪的效果。欢迎提出任何想法，我会立即尝试。

我也曾尝试与检查员打交道，以便即时(实时)更改 CSS 属性，看看我是否可以通过某种方式使该区域可点击，但仍然没有成功。

我应该提到我正在使用 Google Chrome 版本 67.0.3396.87 在 Mac 上进行测试

附件是一张检查员的图片，显示 DIV 在理论上应该没问题。

Answer 1

好的结果是我想通了，感谢这里的答案:Only the left half of the button is clickable in IE

在我的设计中，泳池清洁器的形象妨碍了它，因为它的位置是绝对的。

通过向该元素添加 CSS pointer-events: none;

它解决了这个问题。