javascript - body - necesitaba una forma de forzar el rediseño de<select> s en MSIE8
title html attribute (4)
Con las consultas de medios (simuladas) estoy cambiando el tamaño de fuente de <select> s en mi página
También tengo problemas con otros navegadores, pero resolví separar temporalmente los elementos del DOM y volver a adjuntarlos después de un breve período de tiempo
pero con MSIE8 todavía tengo problemas con la altura de <option> s que es igual al conjunto de tamaño de fuente máximo, incluso si ya no se aplica
http://fiddle.jshell.net/U3bzT/show/light/
Resultado Esperado:
el font-size la font-size se actualiza al cambiar de un tamaño de fuente más grande a uno más pequeño
pero no la línea altura / altura de <option> s
pasa tanto a seleccionar-múltiple como a seleccionar-uno
¿Cómo puedo arreglar esto?
Nota: <select> s puede tener eventos adjuntos, así que no puedo usar una copia
<script>
// just some code to simulate media query on/off state
var select;
setTimeout(function(){
select = document.getElementsByTagName("select")[0];
select.style.fontSize=''40px'';
webkitFix();
setTimeout(function(){
select.style.fontSize=''10px'';
webkitFix();
},5000);
},5000);
function webkitFix(){
document.body.removeChild(select);
setTimeout(function(){ document.body.appendChild(select); }, 1);
}
</script>
<select multiple size="6" style="font-size:10px">
<option>AAAAAA1</option>
<option>BBBBBB2</option>
<option>AAAAAA3</option>
<option>BBBBBB4</option>
<option>AAAAAA5</option>
<option>BBBBBB6</option>
<option>AAAAAA7</option>
<option>BBBBBB8</option>
<option>AAAAAA9</option>
</select>
(Nota: ignore esta respuesta, ya que su edición sugiere no usar el clon. Si alguien se enfrenta a este problema y desea realizar la clonación, use esta razón, por lo que no estoy eliminando mi respuesta).
Si puede administrar un clon para seleccionar una etiqueta aunque los eventos estén adjuntos, el resultado deseado casi no es posible con la implementación actual. Aquí está el enfoque con código.
Navegador verificado: Chrome 28.0.0 Firefox 22.0 IE 7.0/8.0
- Se utilizó una selección de clon para gestionar el resultado deseado.
CÓDIGO:
!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type=''text/javascript'' src=''/js/lib/dummy.js''></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type=''text/css''>
</style>
<script type=''text/javascript''>
window.onload=function(){
var select;
function webkitFix(){
document.body.removeChild(select);
setTimeout(function(){ document.body.appendChild(select); }, 1);
}
setTimeout(function(){
select = document.getElementsByTagName("select")[0];
select.style.fontSize=''40px'';
webkitFix();
setTimeout(function(){
select.style.visibility = ''hidden'';
select1 = document.getElementsByTagName("select")[0];
select1.style.visibility = ''visible'';
select1.style.fontSize=''10px'';
webkitFix();
},5000);
},5000);
}
</script>
</head>
<body>
<select id="one" multiple size="6" style="font-size:10px;">
<option value="AAAAAA1">AAAAAA1</option>
<option value="BBBBBB2">BBBBBB2</option>
<option>AAAAAA3</option>
<option>BBBBBB4</option>
<option>AAAAAA5</option>
<option>BBBBBB6</option>
<option>AAAAAA7</option>
<option>BBBBBB8</option>
<option>AAAAAA9</option>
</select>
<select id="two" multiple size="6" style="font-size:10px; position:absolute; visibility:hidden;">
<option value="AAAAAA1">AAAAAA1</option>
<option value="BBBBBB2">BBBBBB2</option>
<option>AAAAAA3</option>
<option>BBBBBB4</option>
<option>AAAAAA5</option>
<option>BBBBBB6</option>
<option>AAAAAA7</option>
<option>BBBBBB8</option>
<option>AAAAAA9</option>
</select>
</body>
Captura de pantalla 1:
Captura de pantalla 2:
Captura de pantalla 3:
Esto es, y ha sido un gran dolor de cabeza para muchos desarrolladores a lo largo de los años. No hay ninguna solución que haya encontrado que haya solucionado este problema sin utilizar un marcado alternativo junto con mezclas de JS y CSS. Esto se debe a la rigidez del diseño del cuadro de selección en Internet Explorer. Una vez que una casilla de selección ha sido representada por <= IE8, la modificación de la apariencia con class ''y / o JS no es realmente posible como lo ha encontrado. Incluso la modificación de la apariencia de los cuadros de selección con CSS en render es increíblemente limitada y ha dejado a muchos desarrolladores buscando alternativas. Afortunadamente, en las versiones posteriores de IE (de las cuales 8 es mucho mejor que 7, aunque todavía faltan) las casillas de selección son mucho más mutables.
Puedo señalarle una serie de recursos que respaldan esto, algunos de los cuales están en .
- Configuración de la altura de un elemento de selección en IE
- La reducción del tamaño de fuente de IE no hace que la altura de selección disminuya
- Un desarrollador igualmente frustrado, ver primera respuesta
Muchas preguntas relacionadas con esto también quedan sin respuesta en SO, de nuevo por esta razón, no hay una solución al problema en la forma en que desea resolverlo.
Hay una multitud de soluciones provisionales siempre que todas involucren algunas de las siguientes técnicas.
- Usando
<ul>, diseñado para parecerse a cuadros de selección con javascript - Soluciones JS / jQuery que reemplazan cuadros seleccionados con una mezcla de las soluciones anteriores y
<div>
Para su problema específico, se encontrará golpeando constantemente la cabeza contra una pared de ladrillos si no adopta una técnica de reemplazo DOM para IE.
Algunos recursos para usted que ofrecen soluciones, así como otras respuestas aquí que mencionan el uso de jQuery / javascript.
- Twitter Bootstrap Dropdowns
- Desplegables de estilo de Twitter
- Elegido (biblioteca)
- Seleccionar caja de reemplazo jQuery plugin
- Complemento personalizado jQuery plug-in
En conclusión, me temo que su problema no puede resolverse sin utilizar un polyfill para IE o sin adoptar una estrategia de reemplazo total del cuadro de selección.
He probado muchas cosas, height, line-height, offsetHeight, padding, margin, word-spacing, letter-spacing, white-space, text-indent, -ms-word-break, -ms-word-wrap, line-break hasLayout height, line-height, offsetHeight, padding, margin, word-spacing, letter-spacing, white-space, text-indent, -ms-word-break, -ms-word-wrap, line-break , y muchos otros ... incluso trataron de entender la propiedad hasLayout IE y cómo hacer alguna solución, este error / problema de IE8 parece ser no solucionable ...
Si no quieres usar un complemento como lo que sugirió @DavidBarker, tampoco quieres clonar / copiar el menú desplegable original como lo que @ Akki619, esto es lo mejor que puedo encontrar:
if($isIE8) {// alternative solution for IE8
setTimeout(function() {
var w = parseInt(select.style.width, 10);
var h = parseInt(select.style.height, 10);
// change select zoom rather than changing the font-size (since font-size is buggy)
//select.style.fontSize = ''40px'';
select.style.zoom = ''400%'';// almost equal to ''40px''
var longestOptionText = 1;
// for the below, I used jquery to get the longest option text, you might replace it with some javascript
$(''select option'').each(function() {
var txtlen = $(this).text().length;
if(txtlen > longestOptionText) {
longestOptionText = txtlen;
}
});
// -------- end of jquery usage
select.style.width = (parseInt(select.style.fontSize, 10) * longestOptionText) + ''px'';
select.style.height = (parseInt(select.style.fontSize, 10) * longestOptionText) + ''px'';
setTimeout(function() {
//select.style.fontSize = ''10px'';
select.style.zoom = ''100%'';
select.style.width = w + ''px'';
select.style.height = h + ''px'';
}, 5000);
}, 5000);
} else {// all other browsers
// keep your original code here..
}
El resultado tendrá un aspecto similar al que está esperando, pero ahora hay un pequeño problema, si el zoom se establece en más del 100%, la barra vertical de desplazamiento no será visible. Solución: aumente la altura seleccionada para que todas las opciones estén visibles.
Intente acceder a la altura de desplazamiento en la selección. Se fuerza un redibujado.