CSS - 背景颜色在IE11中不起作用(CSS - background-color not working in IE11)

我有以下代码：

.skills_column {

padding: 50px !important;

padding-top: 60px !important;

&.--light {

background-color: white;

}

&.--dark {

background-color: #ced4db;

}

@include media-breakpoint-down(sm) {

h1 {

text-align: center;

}

}

}

有3列，一个轻，两个暗。 所有这些都适用于Chrome和Firefox，但它在IE11中不起作用：

虽然光线是预期的白色，但另外两个应该是黑暗的列在IE11中也是白色的。

问题是什么？ 我还尝试添加filter: none !important; 因为我在某个地方看过，但这似乎没有什么区别，虽然我可能没有正确应用它，我不确定。

我也在使用flexbox，如果这应该有所作为。 但我的问题是没有应用背景颜色。

I have the following code:

.skills_column {

padding: 50px !important;

padding-top: 60px !important;

&.--light {

background-color: white;

}

&.--dark {

background-color: #ced4db;

}

@include media-breakpoint-down(sm) {

h1 {

text-align: center;

}

}

}

There are 3 columns, a light one, and two dark ones. All of this works in Chrome & Firefox, however, it does not work in IE11:

While the light one is white as expected, the two other columns which are supposed to be dark, are also white when viewed in IE11.

What could the problem be? I also tried to add filter: none !important; because I read that somewhere, but that does not seem to make a difference although I might have not applied it correctly, I am not sure.

I am also using flexbox, if that should make a difference. But my problem here is with the background colors not being applied.

原文：https://stackoverflow.com/questions/44923626

更新时间：2019-11-18 14:41

最满意答案

您可以尝试从类名中删除双连字符( --dark ， - --light )。 我有一种感觉IE不喜欢BEM表示。 也许单下划线或双下划线有效。

.skills_column {

padding: 50px !important;

padding-top: 60px !important;

&._light {

background-color: white;

}

&._dark {

background-color: #ced4db;

}

@include media-breakpoint-down(sm) {

h1 {

text-align: center;

}

}

}

Can you try removing the double hyphen from your class names(--dark, --light). I have a feeling IE doesn't like BEM representations. Maybe single underscore or double underscore works.

.skills_column {

padding: 50px !important;

padding-top: 60px !important;

&._light {

background-color: white;

}

&._dark {

background-color: #ced4db;

}

@include media-breakpoint-down(sm) {

h1 {

text-align: center;

}

}

}

相关问答

有两件事阻止了动画在IE11中的工作，它们如下所示： 将animation-play-state设置为以简写形式running时，IE11始终存在问题。 这是没有道理的，它应该被认为是一个错误。 解决这个问题应该是从简写中删除running 。 这不会造成伤害，因为animation-play-state的默认值正在running 。 父按钮容器的尺寸仅为10px x 10px，而伪元素在动画过程中最终会获得60px x 60px的尺寸。 虽然其他浏览器通过默认显示溢出，IE11似乎正在裁剪它。

...

我相信这里的问题是缺乏初始高度。 如果您在元素上循环，并将其高度设置为等于其计算的高度样式的高度，则可以使用折叠样式将高度覆盖为0px，从而触发两个显式数字之间的过渡。 var box = document.querySelector( ".box" );

// Set the box's initial height to its computed height

box.style.height = window.getComputedStyle( box ).height;

//

...

尝试将此属性添加到链接标记：type =“text / css”示例：

I know this is an old problem, but I ran into it trying to solve the same problem with my webserver. IE/Edge was not honouring the css genera

...

您可以尝试从类名中删除双连字符( --dark ， - --light )。 我有一种感觉IE不喜欢BEM表示。 也许单下划线或双下划线有效。 .skills_column {

padding: 50px !important;

padding-top: 60px !important;

&._light {

background-color: white;

}

&._dark {

background-color: #ced4db;

}

@incl

...

也许IE无法处理显示：table(-cell)样式。 尝试使用普通(内联)块样式显示它： #menu {

padding: 0;

margin: 0;

white-space: nowrap;

font-size: 0;

position: relative;

}

#menu * {

font-size: 16px;

list-style-type: none;

padding: 0;

margin: 0

...

你可以添加这行到你的CSS，它会让你的工作。 你只需要将不透明度的等级从0.3调整到你想要的任何等级。 测试和边缘工作。 box-shadow:inset 0 0 0 2000px rgba(84,179,234,0.3);

这里是小提琴 http://jsfiddle.net/dQy8A/35/ You can add this line to your css and it will get it working for you. You just have to adjust the le

...

如果您希望能够悬停它，则需要从图像标记中删除pointer-events:none的内联样式pointer-events:none 。 通过将其设置为none，这意味着您的鼠标无法与元素交互，因此它无法将鼠标悬停以显示标题。 尝试这个：

显示有和没有指针事件的示例小提示 有关指针事件的更

...

根据我的经验，你不能使用IE浏览::after或::before ，因此属性全部被删除，只是因为它们在某些方面不属于选定的元素本身，而是属于它的pesudo。 我发现使其看起来像在其他浏览器中的唯一方法是改变::before样式属性值： header .wrapper .primary-menu #menu-primary-menu > li > .sub-menu::before {

-ms-flex-item-align: center;

-ms-grid-row-align:

...

仅当“仿真”模式设置为IE8或更低时，IE Inspector中的卷曲线才会出现 - 从而表示此属性在当前模式下不会被超出。 但是，如果在Edge模式下使用IE11，则可能会有一些强制兼容模式的元属性

或者，也许您的Windows客户端默认配置为使用comaptibility模式， 请参阅此答案了解详情： Internet Explorer 11通过

...

您可以使用纯JavaScript执行相同的操作并一起删除CSS表达式。 要么 如果您感到懒惰或不想使用JS，请尝试设置文档模式：

将其添加到

...部分。 请注意，这可能会破坏您可能使用过的IE7不支持的属性。 为什么要避免使用CSS表达式： 从Internet Explorer 11开始，不再为Internet区域中加载的网页启用CSS表达式。 当

...