React 和 SCSS webapp 仅在 Firefox 中正确格式化，但在 Chrome 或 Safari 中不正确

Question

一般问题

我正在使用 TypeScript、SCSS 和 Bootstrap 4 开发一个带有 React 的 Web 应用程序。我设计了一些带有背景图像、叠加层（即蒙版）和居中的卡片标题作为组件的卡片，并在 Bootstrap 行和列布局中重用了这个组件。图像大小不等。我使用object-fit: cover CSS 属性在父容器内调整它们的大小。在桌面和我的 Android 移动设备上的 Firefox 浏览器中一切正常，但在移动和桌面设备上的 Chrome 和 Safari 浏览器中却出现了奇怪的问题。

代码

这是卡片组件的代码：

export default class CategoryCard extends Component<CardProps, CardState > {

    constructor(props: CardProps) {
        super(props);
        
        this.onClick = this.onClick.bind(this)
    }

    onClick(event: any) {
        event.preventDefault()
        this.props.clickHandler(this.props.heading)
    }

    getTextElement(str: string) {
        let strArr = str.split("&");
        if (strArr.length >= 2) {
            return <p>{strArr[0]} &<br />{strArr[1]}</p>
        }
        return <p>{str}</p>
    }

    getCenteredTextClass() {
        if (this.props.heading.length >= 11) {
            return style.centeredTextLong;
        }

        return style.centeredTextShort
    }

    render() {
        return (
            <div className={[style.cardContainer].join(" ")}>
                <a href="" type="button" onClick={this.onClick}>
                    <img className={["w-100 h-100", style.categoryImage].join(" ")} src={this.props.image_src} />
                    <div className={[style.mask, "w-100 h-100"].join(" ")}>
                    </div>
                    <div className="text-center">
                        <h4 className={[this.getCenteredTextClass(), style.centeredText, "text-white font-weight-bold"].join(" ")} style={{ position: "relative" }}>
                            {this.getTextElement(this.props.heading)}
                        </h4>
                    </div>
                </a>


            </div>

        );
    }
}

还有 SCSS 样式表：

.categoryImage {
  object-fit: cover;
  object-position: center;
  border-radius: 10px 
}

@media screen and (max-width: 991px) {
  .mask {
    border:1px solid black;
    background-color: black;
    opacity: 0.3;
    z-index: 1;
    position: absolute;
    bottom: 0px;
    border-radius: 10px;
    }
  
  .centeredText {
    position: absolute;
    font-size: 20px;
    z-index: 2,
  }
  
  .centeredTextShort {
    bottom: 80px !important;
    }
  
  .centeredTextLong {
    bottom: 90px !important;
  }
  
  .cardContainer {
    width: 205px;
    height: 145px;
    position: relative;
    margin: 10px
  }
}

@media screen and (min-width: 992px) {
  .mask {
    border:1px solid black;
    background-color: black;
    opacity: 0.3;
    z-index: 1;
    position: absolute;
    bottom: 0px;
    border-radius: 10px;
    }
  
  .centeredText {
    position: absolute;
    font-size: 30px;
    z-index: 2;
  }
  
  .centeredTextShort {
    bottom: 140px;
    }
  
  .centeredTextLong {
    bottom: 150px;
  }
  
  .cardContainer {
    width: 350px;
    height: 240px;
    position: relative;
    margin: 20px;
  }
}

详细问题

所以在 Firefox 中一切都很好，看起来像这样： correct design in Firefox desktop

但在 Chrome 中它看起来像这样： two more or less correct cards and then 4 cards with wrong formatted images in Chrome

在 iPhone 设备上的 Safari 和 Firefox 以及标准的 Android 浏览器中会出现稍微不同的问题。但我想它有相同的解决方案。 看起来一些用于调整容器大小的 CSS 设置不起作用，但仅适用于某些卡片，这很奇怪，因为所有卡片都使用相同的组件。

下面是代码，这里用到了 Card 组件：

class CategoryCards extends Component<CategoryCardsProps> {

    constructor(props: CategoryCardsProps) {
        super(props)
    }

    render() {
        const cssClasses = "col-6 col-sm-6 col-md-4 col-lg-6 col-xl-4 d-flex justify-content-center"
        return (
            <div className="row d-flex justify-content-center">
                {this.props.categories.map((category: CategoryData, i) => (
                    <div className={cssClasses}>
                        <CategoryCard key={category.name} heading={category.name} image_src={buildMediaUrl() + category.image} clickHandler={this.props.clickHandler} />
                    </div>
                ))}
            </div>
        );
    }
}

问题

是否有一些我必须检查的设置，以便所有浏览器和所有设备上的格式都相同（Web 应用程序是响应式的）？也许是一些 dpi 或像素设置，或者在这种情况下我是否必须为不同的浏览器使用一些特定的 CSS 属性？

Answer 1

所以我找到了答案：CategoryCard 组件的 div-tag 内的锚点标签就像一个容器，而 Chrome 与 Firefox 不同，需要明确知道该锚点“容器”的高度和宽度。所以解决方案是只将引导类“w-100 h-100”添加到锚标签，一切都按预期工作。