Question

我在UiBinder中使用style属性定义了styledefinition。例如：

<ui:style
    type="example.client.SomeClass.Style">

        .div1b {
            margin: 10px;               
        }
    </ui:style>
<g:HTMLPanel
    <g:Widget styleName="{style.div1b}" ui:field="widget">
    </g:Widget>
</g:HTMLPanel>

这种风格在Google Chrome中运行良好，但在Firefox（以及后来的IE）中，我想使用不同的风格。所以我想为firefox定义另一种样式。

现在，据我所知，Google建议为firefox样式创建一个全新的类，并在* gwt.xml中使用replace参数。类似的东西：

<replace-with class="example.client.SomeClassFireFox">
    <when-type-is class="example.client.SomeClass" />
    <any>
        <when-property-is name="user.agent" value="gecko1_8" />     </any>
</replace-with>

这是正确的方法，还是更简单的方法，我只是在UiBinder中定义一个新的样式？

此致斯蒂芬

Answer 1

实际上比这更容易：您可以根据@if属性在@else中使用ui:style ... user.agent块：

/* Use padding in Firefox and margin in other browsers. */
@if user.agent gecko1_8 {
   .div1b {
      padding: 10px;
   }
}
@ else {
   .div1b {
      margin: 10px;
   }
}

请参阅http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Conditional_CSS

UiBinder中的风格各异

1 个答案: