Firefox 和 IE 中的溢出 CSS 问题

【问题标题】：Overflow CSS issue in Firefox and IEFirefox 和 IE 中的溢出 CSS 问题
【发布时间】：2015-06-20 00:05:42
【问题描述】：

我正在使用包含许多页面信息的类。这是课程的主要内容：

.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 被选中。

除了重新设计忽略溢出之外，还有什么方法可以解决这个问题？

谢谢。

【问题讨论】：

标签： css internet-explorer firefox overflow

【解决方案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 的后代。

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

【讨论】：

你是绝对正确的。谢谢你。再次感谢您指出小事。笨蛋船长来了！也就是说，问题仍然存在，所以我只是在 .class 规则中隐藏了 overflow-x: hidden 并且效果很好。