Dojo claro css 将绝对定位应用于 ContentPane 元素答案

【问题标题】：Dojo claro css applying absolute positioning to ContentPane elementsDojo claro css 将绝对定位应用于 ContentPane 元素
【发布时间】：2012-11-01 17:04:39
【问题描述】：

我正在使用 dojo 1.8，并且不想在我的边框容器/内容窗格布局中添加任何填充。问题是，似乎当我添加 claro css 文件时，我用于内容窗格的 div 不仅仅是应用类样式，而是内联应用了样式。似乎这是以编程方式完成的，但仅在我添加 css 文件时。

例如，我用作标题的内容窗格如下所示：

<div data-dojo-props="region: 'top'" 
   data-dojo-type="dijit/layout/ContentPane" 
   id="header" 
   class="dijitContentPane dijitBorderContainer-child 
     dijitBorderContainer-dijitContentPane 
     dijitBorderContainerPane dijitAlignTop" 
   title="" role="group" widgetid="header" 
   style="left: 5px; top: 5px; position: absolute; width: 1387px;">

它添加了 style="left: 5px; top: 5px...." 我敢肯定这会阻止我用 css 覆盖任何类型的填充或边距设置。我希望我的内容窗格通过使用这样的绝对位置没有任何填充或“虚拟”填充。我怎样才能仍然使用 claro 但防止这种行为？

【问题讨论】：

标签： css dojo

【解决方案1】：

5px 的出现是因为您在 BorderContainer 上将装订线设置为 true。

将gutters: false 添加到BorderContainer 的属性中。

【讨论】：

【解决方案2】：

dijit.layout 小部件在渲染时执行resize，计算它必须使用的空间，并根据它的任何布局变体进行设置（在您的情况下为 BorderLayout 子级，称为 '嵌套容器'）。因此，内联样式以编程方式完成。

您的问题很可能是您自己应用的 CSS 的“权重”低于 claro.css 中的样式。

检查this link: specificity。这是一个术语，涵盖了哪个选择器的优先级最高。 css-rule 越具体，优先级越高。

因此，您需要“赢得”这样的班级规则：

.claro .dijitContentPane {}

要实现它，请添加 #id 选择器 - 或 nodetype-selector 或类似的。您还可以添加前缀，例如“body”作为通用前缀或“#innerContentsWrapper”作为本地化规则

.dijitContentPane { /* lowest weight */}
.claro .dijitContentPane { /* third highest weight */ }
.claro div.dijitContentPane { /* second highest weight */ }
body .claro div.dijitContentPane { /* the highest weight */ }

【讨论】：

另外，使用 !important 进行 100% 控制
我使用了 !important 并指定了非常具体的 css 规则，但我仍然无法让它工作。最终关闭排水沟解决了这个问题。
实际上，公平地说，我还必须覆盖 .dijitContentPane 并将填充设置为零，所以你们都是正确的。

【解决方案3】：

另一个可行的方法是在您的 div 上设置以下属性：baseClass="dijitContentPaneNoPadding"

【讨论】：