Antecedentes
Estoy desarrollando un sitio web utilizando jQuery, jQuery Validación, y jQuery Autocompletar. Estoy desarrollando un formulario que usa la validación para garantizar que algunos elementos de formulario sean válidos, autocompletar para llenar un cuadro de texto y luego AJAX para reemplazar dinámicamente el formulario. El formulario contiene un par de elementos de formulario, incluidos algunos cuadros de lista desplegable (...). Los cuadros de lista tienen un estilo con CSS3 (con Modernizr para compatibilidad con versiones anteriores).cuadro de selección no funciona/desaparecer en Internet Explorer
El problema
El problema es con Internet Explorer. Estoy probando con IE9 pero tampoco creo que funcione en IE7 o IE8. Hay dos cuadros de selección desplegables y ambos están funcionando mal. Cuando el usuario hace clic en la flecha desplegable para mostrar la lista de opciones seleccionables, la lista desaparece tan pronto como el mouse se mueve sobre ella para hacer una selección, como si el usuario hubiera presionado el mouse (pero sin hacer la selección).
Otras notas: -
- Las cajas se comportan adecuadamente en cualquier otro navegador.
- Las cajas están diseñadas con CSS3.
- Si alternar la compatibilidad veo que las cajas funcionan como deberían, aunque se ven terribles.
El Código
HTML
<form name="form1" action="#" method="post" id="form1">
<fieldset>
<label for = "radio1">
<input type="radio" id="radio1" name="type" value="1" checked = "checked" />
Sell</label>
<label for = "radio2">
<input type="radio" id="radio2" name="type" value="2" />
Buy</label>
</fieldset>
<label>Address or zipcode</label>
<input name="address" id="address" type="text" size="40" placeholder="Address or zipcode" class="ui-helper-clearfix" />
<label>Second Option</label>
<select name="first_option" id="first_option">
<option value="" disabled="disabled">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<label>Second Option</label>
<select name="second_option" id="second_option">
<option value="" disabled="disabled">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 1</option>
<option value="3">Option 1</option>
<option value="4">Option 1</option>
<option value="5">Option 1</option>
<option value="6">Option 1</option>
<option value="7">Option 1</option>
<option value="8">Option 1</option>
<option value="9">Option 1</option>
</select>
<input name="submitbutton" type="submit" value="Submit" />
</form>
CSS
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
label{display:none;font: 100 italic 1.2em/1em "museo-sans";}
label[for=radio1], label[for=radio2]{display: inline-block;margin-right: 1em;padding: 0.7em 0;}
input, select, input[type=placeholder]{color:#666}
select, input, textarea, datalist{ outline: none;font:100 italic 1.2em/1em "museo-sans";margin:0 0 0.5em}
datalist, select, input[type=text], input[type=email], input[type=tel], textarea{padding: 2%;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;border: 1px solid #CCC;width: 96%;background:#fff}
select{width:100%}
input[type=submit], input[type=button], a.button, button {
color: #fff;border: none;width:100%;text-align:center;padding: 0.8em 0;font-size:1.3em;font-weight:700;font-style:normal;text-transform:uppercase;background: #ed4136;border: none;
-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;cursor:pointer;margin-bottom:0}
La pregunta
¿Alguien sabe si esto es un error de secuencia de comandos o un error CSS? Intenté buscar problemas similares en la web, pero no tengo pistas. Sería bueno solo obtener una idea de qué tipo de cosas podrían causar el error.
Tengo la corazonada de que es un error de CSS porque la vista de compatibilidad hace que el error desaparezca. Sería bueno que alguien verificara si estoy en lo cierto o no y ofreceré alguna información.
Si alguien tiene alguna información sobre esto, o una solución sugerida estaría muy agradecido.
el problema, la pregunta, el código? –
Necesita publicar el código antes de que alguien pueda evaluar el problema que presenta. –
Gracias por señalar esto. Código agregado – blockchaindev