Seleccione el elemento en la base de panel acordeón roto en Mozilla Firefox

Question

Esto ha dejado perplejos a mí por un par de horas y no estoy seguro de qué hacer.

Tengo el código predeterminado para un zurb-fundación acordeón con un selecto menú anidado dentro del panel acordeón, tales como:

<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>

Lo anterior funciona bien en Chrome.En Firefox, sin embargo, el primer clic se expanda el menú seleccionar, pero cuando intente y haga clic de nuevo para seleccionar un elemento pierde el foco, no hay nada seleccionado, y usted no puede hacer clic en el botón seleccionar de nuevo.

Pensé que podría tener que ver con haga clic en la formación de burbujas, pero mis intentos de utilizar event.stopPropagation() y event.preventDefault() en tanto la selección y elementos de opción no han cambiado nada.

EDITAR -- http://jsfiddle.net/V7bTH/4/ Este Jsfiddle funciona muy bien en Chrome, no en Firefox.(No pude conseguir mi original de la fundación 5 código de trabajo en jsfiddle, por alguna razón, pero aquí está el mismo problema con algunas de códigos diferentes)

Answer 1

Problema:El uso de select dentro de a no es correcto en HTML porque a es un elemento en línea.si usted va a este simple violín http://jsfiddle.net/3bt8Q/ tampoco por la misma razón que en firefox, pero funciona en chrome debido a que el cromo manijas de manera explícita, pero no su derecho html

Solución:Usted debe utilizar el contenedor para ser otro que el a o usar el elemento con posición absoluta

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;
}