Safari 13 中不支持网格模板列答案

【问题标题】：grid-template-columns not respected in Safari 13Safari 13 中不支持网格模板列
【发布时间】：2021-09-21 05:51:53
【问题描述】：

我遇到了一个问题，我的 React 组件中的网格列显示在 Safari 13 中的不同行上。许多 Google 搜索都没有找到任何结果，我真的希望这里有人能提供帮助。这是我的 React 组件的代码（我省略了一堆不相关的状态内容和函数）：

import React, { useState, useRef } from 'react'
import classNames from 'classnames'
import SlideToggle from 'react-slide-toggle'
import styles from './shoppingListItem.module.css'

const ShoppingListItem = ({
  itemId,
  listTitle,
  canEdit,
  description,
  quantity,
  notes
}) => {
  const [currentQuantity, setCurrentQuantity] = useState(quantity)

  return(
    <div className={styles.root}>
      <button className={styles.button} onClick={toggleDetails}>
        <span ref={headerRef} className={classNames(styles.header, { [styles.headerEditable]: canEdit })}>
          {canEdit &&
            <span className={styles.editIcons} ref={iconsRef}>
              <div className={styles.icon} ref={deleteRef} onClick={destroyItem}><FontAwesomeIcon className={classNames(styles.fa, styles.destroyIcon
              )} icon={faTimes} /></div>
              <div className={styles.icon} ref={editRef} onClick={showEditForm}><FontAwesomeIcon className={styles.fa} icon={faEdit} /></div>
            </span>}
          <h4 className={styles.description}>{description}</h4>
        </span>
        <span className={styles.quantity}>
          {canEdit && <div className={styles.icon} ref={incRef} onClick={incrementQuantity}>
            <FontAwesomeIcon className={styles.fa} icon={faAngleUp} />
          </div>}
          <div className={styles.quantityContent}>
            {currentQuantity}
          </div>
          {canEdit && <div className={styles.icon} ref={decRef} onClick={decrementQuantity}>
            <FontAwesomeIcon className={styles.fa} icon={faAngleDown} />
          </div>}
        </span>
      </button>
      <SlideToggle toggleEvent={toggleEvent} collapsed>
        {({ setCollapsibleElement }) => (
          <div className={styles.collapsible} ref={setCollapsibleElement}>
            <p className={styles.notes}>{notes || 'No details available'}</p>
          </div>
        )}
      </SlideToggle>
    </div>
  )
}

相关的CSS是：

.root {
  font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
  background-color: var(--main-color);
  border-bottom: 1px solid var(--border-color);
}

.root:hover {
  background-color: var(--hover-color);
}

.button {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  cursor: pointer;
  padding: 0;
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.fa {
  color: var(--title-text-color);
}

.destroyIcon {
  margin-right: 8px;
}

.header {
  display: inline-block;
  padding: 32px 16px;
  border-right: 1px solid var(--border-color);
}

.headerEditable {
  display: flex;
  align-items: flex-start;
}

.editIcons {
  display: flex;
  flex-direction: row;
  margin: auto 12px auto 0;
}

.quantity {
  font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: var(--title-text-color);
  display: inline-block;
  margin: auto 0;
  padding: 32px 8px;
  display: flex;
  justify-content: space-between;
}

.quantityContent {
  margin: auto;
}

.icon {
  display: inline-block;
  padding: 4px;
  cursor: pointer;
}

.description {
  display: inline-block;
  font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
  font-size: 1.025rem;
  color: var(--title-text-color);
  margin: auto 0;
  line-height: 1.25;
}

这就是列表项 .button 元素/它的子元素在 Chrome 中的样子（即它应该看起来的样子）：

这是元素在 Safari 中的外观（即它不应该的外观）：

【问题讨论】：

标签： css reactjs safari css-grid

【解决方案1】：

这里的问题原来是我错误地使用了button 元素作为滑动切换触发器，Chrome 并不介意，但 Safari 不喜欢它。由于可访问性原因，我将其设为按钮，但我想这是错误的方法。将滑动切换触发器更改为 div 使其在 Chrome 和 Safari 中看起来相同。

【讨论】：