3

Durandal 似乎会自动将以下内联样式添加到包装其数据视图的 div 元素中：

style="margin-left: 0px; margin-right: 0px; opacity: 1; display: block;"

这发生在使用 Durandal 的 Durandal 和 John Papa Hot Towel ASP.NET SPA 模板中。

此内联样式覆盖了我的外部样式表，因此我需要禁用此行为。我假设这是由其中一个 JavaScript 文件注入的，但我一生似乎无法弄清楚在哪里。

任何人都知道如何防止添加这种内联样式？

4

2 回答 2

6

这是由“入口”过渡（durandal/transitions/entrance.js）设置的。看起来过渡的最终终点是这些值，并且在过渡完成后它们不会被删除。

您可以通过不使用过渡来完全避免这种情况。这将需要几个步骤：

  1. 在 main.js 中，修改您的 app.setRoot() 调用以删除“入口”参数。这将防止样式设置被添加到 shell 容器中
  2. 在 shell.html 中，从 compose 绑定中移除转换设置。这将防止样式设置被添加到单个视图中。

另一种可能性是创建自己的过渡，使其更符合您的 CSS 要求。

于 2013-04-05T03:45:13.120 回答
1

由于入口过渡将此样式添加到视图中的顶级元素 - 您可能只需将当前视图内容与另一个 div 包装在一起，并让它承受应用这些值的影响。

前：

<div class="container-narrow">    
    <div class="row-fluid">
        <div class="span12">
            <h2>Title</h2>
            ....
        </div>
    </div>
</div>

后：

<div>
    <div class="container-narrow">    
        <div class="row-fluid">
            <div class="span12">
                <h2>Title</h2>
                ....
            </div>
        </div>
    </div>
<div>

这在我将容器窄 div 居中的实例中有效

.container-narrow 
{
margin: 0 auto;
max-width: 400px;
}

过渡后丢失了

于 2013-04-16T19:06:56.727 回答