如何使手风琴中的箭头失效？

Question

我想要如何不显示箭头，每个手风琴头都有默认的。在旧浏览器上，我的箭头远离它们应该在的位置，如下所示：

​

​

我已经通过CSS尝试了一个解决方案：

#accordion .ui-icon { display: none; }

在较新的浏览器上，此设置工作得很好。但在较旧的浏览器(如IE 9)上，整个手风琴似乎都坏了：

​

​

，我做错了什么，还是有其他方法禁用这些箭头？

(使用最新的jQuery和jQuery构建。)

这是我使用的标题的HTML：

<!-- Akkordion -->
<div id="accordion">
    <h3>Header</h3>
    <div>
    <form>
        Text
        <table style="width:100%;">
            <tr>
                <td style="width:50%"><b>Text:</b></td>
                <td style="width:50%" colspan="2">Text</td>
            </tr>
            <tr>
                <td style="width:50%"><b>Text:</b></td>
                <td style="width:50%" colspan="2">Text</td>
            </tr>
            <tr>
                <td style="width:50%"><b>Text:</b></td>
                <td style="width:50%" colspan="2">Text</td>
            </tr>
            <tr>
                <td style="width:50%"><b>Text:</b></td>
                <td style="width:50%" colspan="2">Text</td>
            </tr>
            <tr>
                <td style="width:50%"><b>Text:<b></td>
                <td style="width:10%">
                    <!-- input for a jQuery-slider -->
                    <input type="text" id="anzteil" name="anzteilnehmer" readonly style="border:0; color:#f6931f; font-weight:bold;width:20px;font-align:right;">
                </td>
                <td style="width:40%;">
                    <!-- div for a jQuery slider -->
                    <div id="slider-anzteil"></div>
                </td>
            </tr>
        </table>

        <div style="text-align:right;width:100%;margin-top:20px;"><input type="submit" value="Weiter >"></div>

        <script>
         $(function() {
            $( "#slider-anzteil" ).slider({
                range: "min",
                value: 1,
                min: 1,
                max: 4,
                width: 20,
                slide: function( event, ui ) {
                    $( "#anzteil" ).val( "" + ui.value );
                }
            });
            $( "#anzteil" ).val( "" + $( "#slider-anzteil" ).slider( "value" ) );
        });
        </script>

    </form>
    </div>

    <h3>Header</h3>
    <div>
        <form>
        <div id="radio" style="font-size:14px;">
            <table cellspacing="20">
                <tr>
                    <td style="vertical-align: top;"><input type="radio" id="radio1" name="programm" value="1" <% IF pro = 1 THEN Response.Write "checked" END IF %> /></td>
                    <td><label for="radio1">Text</td>
                </tr>
                <tr>
                    <td style="vertical-align: top;"><input type="radio" id="radio3" name="programm" value="3" <% IF pro = 3 THEN Response.Write "checked" END IF %> /></td>
                    <td><label for="radio3">Text</td>
                </tr>
                <tr>
                    <td style="vertical-align: top;"><input type="radio" id="radio2" name="programm" value="2" <% IF pro = 2 THEN Response.Write "checked" END IF %> /></td>
                    <td><label for="radio2">Text</td>
                </tr>
                <tr>
                    <td style="vertical-align: top;"><input type="radio" id="radio4" name="programm" value="4" <% IF pro = 4 THEN Response.Write "checked" END IF %> /></td>
                    <td><label for="radio4">Text</td>
                </tr>
            </table>

            <div style="text-align:right;width:100%;margin-top:20px;"><input type="submit" value="Weiter >"></div>
        </div>
        </form>

    </div>

    <h3>Header</h3>
    <div>
    <form>
        <div class="ui-widget">
            <div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;">
                <p>
                    <span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
                    Text
                </p>
            </div>
        </div>

        <br>

        <table style="width:460px;">
            <tr>
                <td><b>#</b></td>
                <td><b>Text</b></td>
                <td><b>Text</b></td>
                <td><b>Text</b></td>
            </tr>
            <tr>
                <td>1</td>
                <td>Text</td>
                <td>Text</td>
                <td align="center">Text</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Text</td>
                <td>Text</td>
                <td align="center">Text</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Text</td>
                <td>Text</td>
                <td align="center">Text</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Text</td>
                <td>Text</td>
                <td align="center">Text</td>
            </tr>
        </table>

        <div style="text-align:right;width:100%;margin-top:20px;"><input type="submit" value="Weiter >"></div>
    </form>
    </div>

    <h3>Header</h3>
    <div>
    <form>
        <p>
            Text
        </p>

        <table style="width:100%;">
            <tr>
                <td style="vertical-align: top;">Text</td>
                <td style="vertical-align: top;">Text</td>
            </tr>
            <tr>
                <td style="vertical-align: top;">Text</td>
                <td style="vertical-align: top;">Text</td>
            </tr>
            <tr>
                <td style="vertical-align: top;">Text</td>
                <td style="vertical-align: top;">Text</td>
            </tr>
            <tr>
                <td style="vertical-align: top;">Text</td>
                <td style="vertical-align: top;">Text</td>
            </tr>
            <tr>
                <td style="vertical-align: top;">Text</td>
                <td style="vertical-align: top;">Text</td>
            </tr>
        </table>

        <div style="text-align:right;width:100%;margin-top:20px;"><input type="submit" value="Weiter >"></div>
    </form> 
    </div>

    <h3>Header</h3>
    <div>
    Text<br>
    <br>
    Text
    </div>

</div>

(重要的文本段落已更改为" text "，但没有损害HTML。)

我使用标准CSS，Redmond风格。

初始化手风琴：

$( "#accordion" ).accordion({ collapsible: true, active: false, heightStyle: "content" });

Answer 1

这应该可以做到：

JSFiddle：演示

.ui-accordion-header-icon {
    display: none;
}

我在IE9上测试了它。

​

​