JSX/CSS：按钮文本在外部按钮是 Chrome

Question

我正在使用 CSS 设置 React 组件的样式，并在 Chrome 和 Firefox 中得到两个不同的结果：

Firefox（两者的期望行为）：

铬：

我不担心它在两者之间显示完全相同，但我确实希望它在 Chrome 上看起来也不错。从我所见，Chrome 的行为就好像按钮文本是按钮之后出现的一个单独元素。我使问题的白色背景可见，但它将是透明的，因此无需解决此问题。

我正在使用normalize.css，但没有供应商前缀 - 我还不知道如何使用它们（如果你能提供一个很好的简单资源，我也可以学习它！:)）

这是我的整个组件的 JSX（我主要关心的类是 slide__caption__button）：

    <div className = "slide">

    <img className = "slide__image" src = {this.chooseImage()}></img>
    <div className = "slide__caption"
      onMouseEnter = {() => {
        this.props.pausingSlideshow();
      }}
      onMouseLeave = {() => {
        this.props.unpausingSlideshow();
        setTimeout(this.props.changeSlide, 0);
      }}
      >
      <p>{this.props.caption}</p>
        <br />
      <button
        className = "slide__caption__button"
        onClick = {this.sendTo.bind(this, this.props.buttonHref)}
      >
        <span>{this.props.buttonText}</span>
      </button>

      {/* slide chooser */}
      <div className = "chooser">
        {
          this.props.slidesLength.map((index) => {
            return (
              <div
                key = {index}
                className = "chooser__button"
                onClick = {this.props.goToSlide.bind(this, index)}
                >
                  o
              </div>
              );
            })
          }
      </div>

    </div>
  </div>

这是我的 CSS：

    .slide {
      position: absolute;
      background: white;
      height: 100vh;
      width: 100vw;
    }

    .slide__image {
      opacity: 0.5;
      object-fit: cover;
      width: 100%;
      min-height: 100%;
    }
    // mobile
    .slide__caption {
      display: flex;
      flex-direction: column;
      justify-content: center;

      position: absolute;
      top: 20%; bottom: 0; left: 0; right: 0;
      font-weight: 600;
      margin: auto;
      width: 40%;
      height: 20%;
      background: white;
      border-radius: 1rem;
      text-align: center;
      text-shadow: -2px 2px 2px $cream, 2px -2px 2px $cream, -2px -2px 2px $cream, 2px 2px 2px $cream;
      color: #112233;
    }

    .slide__caption__button {
      position: relative;
      padding: 1rem;
      background: purple;
      border: 1px solid #112233;
      border-radius: 3rem;
      color: white;
      box-shadow: 0 2px 2px grey;
      margin: auto;
    }
    .slide__caption__button:hover {
      cursor: pointer;
      box-shadow: none;
      background: lighten(purple, 10%);
    }
    .chooser {
      display: flex;
      justify-content: center;
    }
    .chooser__button {
      color: transparent;
      width: .8rem;
      height: .8rem;
      border: solid 1px $dark;
      border-radius: 1rem;
      background: lighten($dark, 10%);
      text-shadow: none;
      opacity: .4;
      margin: 2rem .6rem;
    }
    .chooser__button:hover {
      cursor: pointer;
      background: lighten($dark, 40%);
    }

    // desktop
    @media (min-width: $desktop-breakpoint) {
      .slide__caption {
        top: 0;
        bottom: 20%;
      }
    }

Answer 1

我没有弄清楚问题出在哪里，但我确实找到了解决方法 - 我将按钮标签切换为 div 并且一切正常。 :S