Element im Foundation-Akkordeon-Bedienfeld in Mozilla Firefox defekt auswählen

Question

Das hat mich ein paar Stunden lang verwirrt und ich bin mir nicht sicher, was ich tun soll.

Ich habe den Standardcode für ein Zurb-Foundation-Akkordeon mit einem Auswahlmenü, das im Akkordeon-Bedienfeld verschachtelt ist, wie folgt:

<dl class="accordion" data-accordion>
  <dd>
    <a href="#panel1">Accordion 1. 
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </a>
    <div id="panel1" class="content active">
      Content ... 
    </div>
  </dd>
  <dd>
    <a href="#panel2">Accordion 2</a>
    <div id="panel2" class="content">
      Content .. 
    </div>
  </dd>
</dl>

Das obige funktioniert in Chrome einwandfrei.In Firefox wird das Auswahlmenü jedoch beim ersten Klick erweitert. Wenn Sie jedoch erneut klicken, um ein Element auszuwählen, verliert es den Fokus, es ist nichts ausgewählt und Sie können nicht erneut auf die Auswahlschaltfläche klicken.

Ich dachte, es könnte mit Klick-Blubbern zu tun haben, aber meine Versuche, es zu nutzen event.stopPropagation() Und event.preventDefault() Sowohl am Select- als auch am Option-Element hat sich nichts geändert.

BEARBEITEN --http://jsfiddle.net/V7bTH/4/ Dieses Jsfiddle funktioniert hervorragend in Chrome, schlägt jedoch in Firefox fehl.(Aus irgendeinem Grund konnte ich meinen ursprünglichen Foundation 5-Code in jsfiddle nicht zum Laufen bringen, aber hier ist das gleiche Problem mit einem anderen Code)

Answer 1

Problem:Gebrauch von select innen a ist nicht das richtige HTML, weil a ist ein Inline-Element.wenn du dazu gehst einfache Geige http://jsfiddle.net/3bt8Q/ Aus dem gleichen Grund funktioniert es in Firefox auch nicht, aber in Chrome funktioniert es, weil Chrome es explizit behandelt, aber es ist kein richtiges HTML

Lösung:Sie sollten den Behälter anders als verwenden a oder verwenden Sie einfach ein absolut positioniertes Element

DEMO - http://jsfiddle.net/V7bTH/6/

html

<div class="row">
    <div class="large-12 columns">
        <h2>Accordion</h2>
        <div class="section-container accordion" data-section="accordion">

            <section class="qw">
                <select id="select">
                            <option value="volvo">Volvo</option>
                            <option value="saab">Saab</option>
                            <option value="mercedes">Mercedes</option>
                            <option value="audi">Audi</option>
                          </select>
                <p class="title">

                    <a href="#tab-1">Tab 1

                    </a></p>
                <div class="content" data-slug="tab-1">
                    <h3>Here's a Title</h3>
                    <p>Here's a description</p>
                </div>
            </section>
            <section>
                <p class="title"><a href="#tab-2">Tab 2</a></p>
                <div class="content" data-slug="tab-2">
                    <h3>Here's a Title</h3>
                    <p>Here's a description</p>
                </div>
            </section>
            <section>
                <p class="title"><a href="#tab-3">Tab 3</a></p>
                <div class="content" data-slug="tab-3">
                    <h3>Here's a Title</h3>
                    <p>Here's a description</p>
                </div>
            </section>
        </div>
    </div>
</div>

CSS

.qw{
 position: relative;
}
#select{
    width:100px;
    position: absolute;
    top: 10px;
    left: 100px;
}