css - GWT ListBox 在不同浏览器中呈现不同

Question

所以，我有一个用于 GWT 应用程序的 ListBox 的自定义实现

它的 xml 代码如下所示:

<g:FlowPanel addStyleNames="{style.yearRangePanel}">
        <g:FlowPanel addStyleNames="{style.rangeSeparator} {style.paddingTop}">
            <g:Label addStyleNames="{style.horizontalAlign}" ui:field="integerRangeDropdownLabel">Filter studies by range of enroled patients: </g:Label>
            <g:Label addStyleNames="{style.prefixSpace} {style.horizontalAlign}" ui:field="startSampleSizeLabel"/>
        </g:FlowPanel>
        <g:FlowPanel ui:field="integerRangeDropdownFilterPanel" addStyleNames="{style.yearRangeSliderPanel} {style.paddingTop}">
            <g:ListBox ui:field ="integerRangeDropdownListBox" styleName="{style.customListBox}"/>
        </g:FlowPanel>
    </g:FlowPanel>

它的主要 java 代码如下所示:

 @UiConstructor
    public IntegerRangeDropdownFilterComposite (String fieldName, String labelText){
        this.initWidget(uiBinder.createAndBindUi(this));

        filterChangedEvent = new FilterChangedEvent(fieldName);

        FilterConfig filterConfig = clientFactory.getApplicationContext().getConfig(FilterConfig.class);
        List<FilterSetting> filterSettings = filterConfig.getFilterConfigBy(fieldName);
        FilterSetting filterSetting = filterSettings.get(0);
        filterByIntegerRangeSettings = (FilterConfig.FilterByIntegerRangeSettings) filterSetting;

        this.increment = Integer.toString(filterByIntegerRangeSettings.getIncrement());
        this.minSampleSize = Integer.toString(filterByIntegerRangeSettings.getInitialValue());
        this.maxSampleSize = Integer.toString(filterByIntegerRangeSettings.getEnd());

        this.setupConfig(fieldName);
    }

    private void setupConfig(String fieldName){
        setupRange(fieldName);
    }

    @Override
    protected void onLoad() {
        super.onLoad();
        integerRangeDropdownFilterPanel.add((Widget) integerRangeDropdownListBox);
    }

    public void resetIntegerRangeDropdownFilter() {
        filterChangedEvent.resetField();
    }

    @UiHandler("integerRangeDropdownListBox")
    public void clickEnroled(ChangeEvent changeEvent){
        if(integerRangeDropdownListBox.getSelectedIndex()!=0) {
            String selectedItem = integerRangeDropdownListBox.getSelectedItemText();
            minSampleSize = selectedItem.substring(0, (selectedItem.indexOf('-'))).trim();
            maxSampleSize = selectedItem.substring((selectedItem.indexOf('-') + 1)).trim();
        }
        else{
            minSampleSize="0";
            maxSampleSize="100000";
        }
        resetIntegerRangeDropdownFilter();
        filterChangedEvent.addFilter(Integer.parseInt(minSampleSize), Integer.parseInt(maxSampleSize));
        clientFactory.getEventBus().fireEvent(filterChangedEvent);
    }

现在，至于样式，我已经尝试用这一行“Bootstrap ”它:

<g:ListBox ui:field ="integerRangeDropdownListBox" styleName="btn btn-primary dropdown-toggle"/>

我试过像这样用 CSS 自定义它:

.customListBox{
            background-color: dodgerblue !important;
            color: white;
            padding: 5px;
        }

   <g:ListBox ui:field ="integerRangeDropdownListBox" styleName="{style.customListBox}"/>

无论我采用哪种方式，它都不会在不同的浏览器中呈现相同的效果，它只会在 Google Chrome 上看起来“不错”，而在 Safari 和 Firefox 中，它的下拉菜单和不同的滚动条会有一个“uglee”箭头。

关于为什么会发生这种情况有什么想法吗？不用说我已经尝试过谷歌和论坛，但是搜索 GWT 相关主题几乎没有用

Answer 1

首先，您应该使用addStyleNames 而不是styleName，因为styleName 会删除所有现有的样式名称并将它们替换为您提供的样式名称.

其次，这不是 GWT 问题。浏览器以不同方式呈现各种元素。如果您想要更统一的外观，您需要搜索 CSS 建议。