CSS: width: 100% 在某些浏览器中不会填充父级的宽度

Question

目前我正在开发一个交互式卡片模板来在我的网络应用程序中显示内容，目标是让“遮罩”从顶部的 30% 开始，延伸到底部并填充父级（横幅类）的整个宽度)，我的 CSS 文件中有以下这些组件的类。

.banner{
    z-index: 4;
    background-color: #F7AE00;
    width: 25%;
    min-width: 250px;
    border: 2px solid rgb(108, 108, 108);
    box-sizing: border-box;
    position: relative;
    height: 400px;
    border-radius: 7px;
    box-shadow: 2px 2px 10px rgb(0, 0, 0);
    display: flex;
}

.mask {
    z-index: 6;
    background-color: gray;
    position: absolute;
    right: 0;
    width: 100%;
    height: 70%;
    left: auto;
    top: auto;
    bottom: 0;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;

    pointer-events: none;
    transition: height 300ms ease-in-out;

    flex-grow: 1;
    box-sizing: border-box;
}

我的卡片看起来和表现都很好，但在某些浏览器（如 Opera GX）中，掩码不会填满整个横幅宽度，我为此尝试了不同的解决方案，有时我可以让它填满这些浏览器中的宽度，但是当我玩横幅类的边框时，我又遇到了这个问题。

我想我的问题是：这是一个兼容性问题，还是无论客户端使用什么浏览器，都必须有适合我的 porpuse 的语句？

Answer 1

为确保 CSS 样式适用于所有浏览器，您应该为某些属性包含特定于浏览器的前缀。例如，要为元素设置边框半径，您应该使用以下代码：

-webkit-border-radius: 5px;  /* Safari and Chrome */
-moz-border-radius: 5px;     /* Firefox */
-o-border-radius: 5px;       /* Opera */
border-radius: 5px;          /* Standard syntax */

这会将值为 5px 的 border radius 属性应用于元素，并且适用于所有主流浏览器。