css - Firefox 和 IE 中的溢出 CSS 问题

Question

我正在处理包含许多页面信息的类。 这是类(class)的主要内容:

.class {     
    margin: 1% 0.5%;
    padding: 10px;
    border: 1px solid #E3E3E3;
    box-sizing: border-box;
    overflow: auto;
}

当我尝试在样式表 class="class class1"中添加一个使溢出属性无效的类时，它在 IE 和 Firefox 中不起作用。

.class .class1 {     
        margin: 1% 0.5%;
        padding: 10px;
        border: 1px solid #E3E3E3;
        box-sizing: border-box;
        overflow: auto;
    }

在 Chrome 和 Safari 中，溢出从级联中移除。 在 IE 和 Firefox 中，只有 .class 被拾取。

除了重新设计而忽略溢出之外，还有什么解决方法吗？

谢谢。

Answer 1

如果您的 HTML 是 class="class class1" 那么选择器是错误的。

这个

.class .class1 { /* with space */    
        margin: 1% 0.5%;
        padding: 10px;
        border: 1px solid #E3E3E3;
        box-sizing: border-box;
        overflow: auto;
    }

应该是这样

.class.class1 {    /* no space */  
        margin: 1% 0.5%;
        padding: 10px;
        border: 1px solid #E3E3E3;
        box-sizing: border-box;
        overflow: auto;
    }

原始声明之间的空格表明 class1 是 class 的后代。

我显示的第二个选项(没有空格)意味着该元素具有两个类并且仅适用于该实例。