Question

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

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

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

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

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

Answer 1

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

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

在main.js中，修改app.setRoot（）调用以删除'entrance'参数。这将阻止样式设置添加到shell容器
在shell.html中，从撰写绑定中删除转换设置。这样可以防止将样式设置添加到各个视图中。

另一种可能性是创建自己的过渡，与CSS要求更加兼容。

Answer 2

当入口过渡将此样式添加到视图中的顶级元素时 - 您可以将当前视图内容与另一个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;
}

在过渡后迷失了

禁用Durandal内联样式

2 个答案: