某些页面只会忽略一个CSS规则

Question

我有一个奇怪的问题，在同一样式表定义的两个不同页面上，其中一个页面忽略了CSS规则。以下是事实：

• 我的CSS文件被加载到两个页面中（使用Firebug和Firefox的本机工具完成）
• 该属性适用于页面但不适用于其他页面，具有相同的代码!!

以下是一些有助于理解的屏幕截图：

对于这个，设计正确应用，我在iframe上看不到任何滚动条。但在这一个： 当我选择iframe时，“custom_design.css”中的设计没有出现在规则控制台中，因为我为WPQ5和WPQ4 id都应用了设计......

我在这里发布了一个截图，证明我的网页链接了相同的文件（如果不是这样的话，Google表单将不会应用此样式）：

以下是我的iframe附带的整个风格：

/* this is the one not applyed */
iframe#MSOPageViewerWebPart_WebPartWPQ5, iframe#MSOPageViewerWebPart_WebPartWPQ4 { 
    overflow:hidden !important;
    min-height:55px;
    min-width:400px;
}

iframe {
    border: medium none;
}
.ms-webpart-chrome {
    border-spacing: 0px;
}
.ms-rte-wpbox {
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    text-indent: 0px;
    line-height: normal;
    white-space: normal;
    word-wrap: normal;
    list-style: disc outside none;
}
.ms-rte-layoutszone-inner {
    word-wrap: break-word;
}
.ms-rtestate-field TABLE, .ms-rtestate-write TABLE {
    border-collapse: collapse;
}
.ms-rtestate-field {
    word-wrap: break-word;
}
body, .ms-core-defaultFont, .js-callout-body {
    color: rgb(68, 68, 68);
}
body, .ms-core-defaultFont, #pageStatusBar, .ms-status-msg, .js-callout-body {
    font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size: 13px;
}

如果您需要关于我的问题的任何其他精确或信息，请问我。 我希望它足够清楚，感谢任何提示：）

Answer 1

在您的检查视图中，从“规则”切换到“计算”并搜索您的属性（溢出，最小高度......）。

如果属性不，则表示样式表中的规则不匹配 - 在这种情况下检查：

• 样式表确实正确加载了吗？
• 没有选择器错误（跳过规则）
• 选择器匹配（HTML＆lt; - ＆gt; CSS）
  • 在检查视图中，您可以右键单击该元素并“复制唯一选择器” - 使用此选项来应用您的css规则并重试

如果属性存在，请展开它。现在，您可以看到实际应用于元素的规则及其来源。检查来源并采取相应的措施：

• 删除/修改规则（如果它在您自己的样式表中）
• 为您所需的规则提供更高的优先权。

Answer 2

似乎第二页没有链接到它的样式表，因为我看不到custom_design.css上的任何规则。

请您提供这两个页面的链接，否则无法确定问题究竟是什么。

Answer 3

好的，我发现为什么它的表现如此...所以我至少会发布答案。

事实是：在我的Google搜索表单获得每个CSS规则的页面中，CSS文件包含两次：一次进入iframe（在head标签中），一次进入主页面，托管iframe中。

在第二页上，.css文件已注册到iframe中，但未在主页面中注册。因此，它只会将规则应用于iframe的内容，而不会应用于标签iframe本身。 （被视为另一页）。

所以我将.css添加到主页面中......所有CSS规则都已正确应用。不错。 这就是为什么你应该避免使用iframe，它是如此混乱...但我无法避免它，因为它是来自特定CMS的小部件。