html - 应用于 anchor 标记的相同类 IE 11 生成两个不同的背景图像

Question

我将相同的类应用到两个不同的元素，为背景属性生成的内容是不同的。

我结束了 按钮 1 - rgba(0, 0, 0, 0) linear-gradient(rgb(0, 81, 0) 0%, rgb(36, 138, 30) 100%) 重复滚动 0% 0%/自动填充框边框框

按钮 2 - rgba(0, 0, 0, 0) 线性渐变(rgb(36, 138, 30) 0%, rgb(0, 81, 0) 100%) 重复滚动 0% 0%/auto填充框边框框

我不明白为什么我会使用同一个类生成两个不同的值。

类的背景属性如下所示: 背景:线性渐变(到底部，#248a1e 0%，#005100 100%)；

所以我最终得到一个按钮，该按钮呈现我期望的方式，另一个按钮看起来像这篇文章中的那个 Crossbrowser css gradient in IE10, IE11 .

Answer 1

您正在为同一个按钮使用两个类。最后的 CSS 将被渲染。因此，“contact-button”中的样式会覆盖“green-button”类的样式。使用 !important 表示未覆盖的属性。

    .green-button {
                text-align: center;
                color: #fff;
                border: 1px solid #016d01;
                font-size: 14px;
                font-weight: bold;
                padding: 8px 14px 8px 14px;
                background: #52b152;
                background: linear-gradient(to bottom, #248a1e 0%,#005100 100%) !important;
                border-radius: 4px;
            }