Question

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

下面是发生的情况的图像。

当我移到send中的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，则需要让我知道，我会立即上传。

我尝试过的事情：

我尝试将显示更改为内联代码块而不是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;

它解决了这个问题。

按钮仅部分可点击错误

1 个答案: