¿Por qué los navegadores reemplazan el valor de ancho asignado mediante css?

Question

Cuando asigno un estilo básico a todas las selecciones, p. Ej.

width: 300px; 
padding: 0; 
margin: 0; 
border-width: 1px; 

Obtengo resultados inesperados al recuperar el ancho mediante javascript en diferentes circunstancias.

• Cuando el seleccione es visible la es con 298px.
• Cuando el Select es display: none, la anchura es también 298px (ff, jquery)
• Cuando el seleccione está en un div con display: none, la anchura es correcta 300px.

(El resultado es también la misma asignación: caja de tamaño: frontera-box)

Bueno, la anchura recuperada veces difiere del navegador y JavaScript utilizado marco, pero en general sólo quiero ser capaz de recuperar el ancho asignado (300px). (supongo que tiene algo que ver con la "rareza formal" indica aquí: http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/, pero ¿por qué no los navegadores usar el ancho asignado por el usuario ??)

¿Cómo puedo recuperar el ancho asignado? ¿Hay realmente forma de hacerlo?

Ejemplos:

http://jsfiddle.net/ETCcH/5/ (para el uso de jQuery, o reemplazar el 5 con un 4 para un ejemplo usando mootools)

(vista y probar con diferentes navegadores)

Answer 1

Nunca se tiene el valor escrito en el archivo css. Con JavaScript, solo obtendrá las propiedades CSS actualmente aplicadas a ese elemento por el navegador web.

En este caso, si el ancho es realmente fijo, puede "forzarlo" con un ancho máximo establecido en 300px o agregando un overflow: hidden - si esa es una opción.

Answer 2

Parece que el tamaño de la caja de su navegador es un recuadro de forma predeterminada para ciertos elementos. intente poner tamaño de caja: content-box; en select y jquery le dan el resultado correcto.

Jquery obtendrás el ancho del contenido con el método de 'ancho' para que elimine el margen, el relleno y el borde. Con el tamaño de la caja: border-box, el ancho dado toma el relleno y el borde en la cuenta.

Ernoriel

Answer 3

En realidad se trata de las fronteras que está causando el problema. Establezca el ancho del borde en 0 y podrá ver 300 px para todos. En realidad, los navegadores están configurando el ancho del elemento a 300px como lo espera, y agregando los bordes alrededor. Para los elementos visibles, puede obtener el ancho completo del elemento utilizando offsetWidth (que se establecerá en 0 si configura la pantalla en ninguno.)

Answer 4

No hay una forma simple de acceder al valor especificado en CSS.

Cuando se utiliza .css() en jQuery, que está recibiendo el computed value. Lo que está buscando se llama specified value.

Cuando un valor especificado es calculado, se ajustará según la situación (en su violín, bordes). Es por eso que el ancho es diferente. Sin embargo, no sé por qué el select hidden de un div principal no se ajusta a los bordes.

Solución 1: ¿Quizás una mejor manera de obtener el valor especificado del elemento es buscar el ancho de su elemento primario? Al ver cómo es una buena práctica no establecer anchuras en elementos específicos de todos modos (sino más bien en sus padres, como cuando se utiliza un sistema de cuadrícula o similar), este puede ser su enfoque. El uso de anchuras en los padres efectivamente restringe el ancho máximo de sus hijos.

Solución 2: Ahora, si realmente desea que el valor especificado, supongo que se podría pasar por document.styleSheets y por cada hoja de estilo, acceso a la propiedad cssRules y su forma de trabajo hasta que haya encontrado el valor que' que estas buscando. Cuando probé esto en Chrome, cssRules parece estar vacío, pero Firefox lo rellena y enumera obedientemente todos los estilos en cada hoja de estilo adjunta a la página.

Yo no lo recomiendo, pero si usted decide ir por ese agujero, usted puede estar interesado en cualquiera de estas preguntas SO:

• Mapping computed CSS styles to specified ones?
• Listing known CSS classes using Javascript

I no recomendamos cambiar el box-sizing ya que esto le dará el valor que está buscando, pero el ancho real del elemento será más ancho (ancho de base 300px + bordes = ancho de 302px).

Si ninguno de estos hace flotar su bote, tal vez sea hora de sentarse y pensar (¡y explicar!) Lo que quiere hacer y por qué. Cada vez que quiero hacer cosas no estándar para tareas simples, no es raro porque mi solución quizás no sea óptima y necesito alejar un poco el zoom antes de continuar.