Question

我今天在Android移动项目中使用Worklight 5.0.5时遇到了一个问题。该项目确实使用了Apache Cordova，Dojo Mobile和Worklight库，如果有帮助的话。

问题是Worklight在构建期间会在某些情况下自动生成不需要的内联CSS。我无法找到Worklight的哪个组件对此负责，也无法找到在需要时如何更改或阻止此行为。这似乎是一个小问题，但事实上它是内联CSS，并且在构建期间意味着我无法影响它！

通过JavaScript和CSS搜索，包括我构建的和为Dojo导入的那些，似乎没有显示任何会添加CSS的内容。

示例：

我的HTML中有以下标记：

<ul data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl"
class="center segmentContainer">

构建完成后，会在基于WebKit的浏览器（Google Chrome）中显示为：

<ul bartype="segmentedControl" class="mblTabBarSegmentedControl mblTabBar center segmentContainer mblTabBarNoIcons"
data-dojo-type="dojox.mobile.TabBar" id="dojox_mobile_TabBar_0"
widgetid="dojox_mobile_TabBar_0" style="padding-left: 78px;">

最终的内联CSS，即“padding-left”，正是我试图寻找并摧毁的东西。有谁知道这个行为的原因是什么，以及我如何改变或阻止它？

Answer 1

我对这些技术知之甚少，但如果您无法摆脱插入的CSS，您可以在自己的CSS中使用!important。例如：

.segmentContainer {
    padding-left: 0px !important;
}

这优先考虑移出正常优先顺序的padding-left语句。通常情况下，我会使用内联，ids和课程，但是!important您的课程会优先考虑。

Answer 2

你确定这个Worklight的构建过程添加了这个样式而不是Dojo的解析吗？我会检查Dojo mobile api以确保默认情况下不添加它。用于TabBar的OOTB Dojo使用内联CSS生成以下标记。

<ul id="demoTabBar" dojotype="dojox.mobile.TabBar" single="true" iconbase="images/tabbar_all.png" fixed="bottom" role="tablist" class="mblTabBarTabBar mblTabBar mblFixedBottomBar mblTabBarNoText mblTabBarFill" widgetid="demoTabBar" style="bottom: 0px; padding: 0px;">

Answer 3

这是默认的Dojo样式。您可以覆盖它在AppName.html中编写此代码：

...
<style>
.segmentContainer {
    //your personalization
}
</style>
</head>
<body>
......
<ul data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl"
class="segmentContainer">

Worklight 5.0.5生成不可更改的内联CSS

3 个答案: