Uso de box-sizing:border-box

[harvey]

He intentado usar box-sizing:border-box; en una hoja de estilo pero por lo que veo no funciona en ninguno de los navegadores que he probado (versiones bastante nuevas de IE y Firefox y Google Chrome).
Esta propiedad de capa forzaba a tomar el width comprendiendo el border y el padding tal como lo solía hacer IE. ¿Esta etiqueta está desaprobada actualmente por el WC3?

[kseso?]

¿Y para que quieres obligar a los navegadores de verdad a que hagan las cosas mal?

Hazlo bien, y en última instancia, corrige los bugs de los malos navegadores con el uso de los comentarios condicionales u otras prácticas para arreglar tú la incompetencia de los programadores de micro$oft.

De todas formas, aquí tienes una relación de las propiedades css2

Un saludo

[harvey]

Iniciado por kseso?

¿Y para que quieres obligar a los navegadores de verdad a que hagan las cosas mal?

Hazlo bien, y en última instancia, corrige los bugs de los malos navegadores con el uso de los comentarios condicionales u otras prácticas para arreglar tú la incompetencia de los programadores de micro$oft.

De todas formas, aquí tienes una relación de las propiedades css2

Un saludo

Pues precisamente porque no pienso que este mal así. Es decir, Microsoft no se atiende a los estandares impuestos por la W3C y hace las cosas como le da la gana(?) pero paradójicamente resulta que la forma en que maneja las capas, el padding y el border tiene mas sentido que la que usan los demás navegadores y la W3C.

Si tu tienes una caja y dices que mide 400 px, por ejemplo, eso deberia incluir los bordes y el padding ¿O acaso hay algún objeto que cuando lo mides dejes de medir sus bordes o lo que haya entre su contenido y sus bordes? ¿Si mides un cajón mides solo el tamaño del contenido posible del mismo? ¿Y eso con que distancia entre dicho contenido y el borde?
Plantealo así; tienes un contenedor en la web de, pongamos, 700 px que repartes en tres columnas (150,400,150) en lo que sería un diseño típico y decides que el texto queda muy pegado (o muy separado) del borde de la capa
así que con la forma en que IE llevaba el tema SOLO tenias que cambiar el padding en la capa que quisieras porque las capas seguirían teniendo el mismo tamaño.
En cambio tal como lo hace la W3C si decides cambiar el padding no solo tienes que corregir este sino tambien el width de la capa. Y no solo eso, si decides que el tamaño total de la columna está bien pero necesitas mas espacio entre texto y borde tambien tendrias que cambiar el de alguna de las otras capas de los lados para que el conjuto siga midiendo esos 700 pixeles del contenedor, la cabecera y el pie.

IE puede que no sea el mejor navegador del mundo y puede que Microsoft sea el mismisimo demonio según os empeñais pero cuando tiene razón tiene razón y la manera en que la W3C usa las cajas es una chapuza y una forma caprichosa(!) de hacer las cosas.

P.D: ¿debo entonces entender que la W3C no acepta box-sizing?

[kseso?]

Bueno, es tu opinión. (y esto no es sarcasmo).
Tampoco son capas.
Tampoco es que unos navegadores hayan hecho interpretaciones diferentes. La cuestión es que se definen unos estándares y hay quien los respeta y otro que dice "ah, no. Yo lo hago a mi manera y los estándares a tomar..."

Más lógico o menos es subjetivo. Hubo que acordar un estándar y eso hicieron, como definir los bordes, márgenes... en sentido horario empezando por el superior. Opiniones habría para haberlo hecho diferente: el derecho primero y hacia abajo (antihorario) pero...

Un saludo, harvey

P.D.: Y no, no recuerdo haberme encontrado nunca el "box-sizing" dentro de lo estándares de css2.1
P.D.: Lo que sí me imagino que haces es usar un doctype válido y poner a cero tu css (reset css)

[harvey]

Iniciado por kseso?

Bueno, es tu opinión. (y esto no es sarcasmo).
Tampoco son capas.
Tampoco es que unos navegadores hayan hecho interpretaciones diferentes. La cuestión es que se definen unos estándares y hay quien los respeta y otro que dice "ah, no. Yo lo hago a mi manera y los estándares a tomar..."

Más lógico o menos es subjetivo. Hubo que acordar un estándar y eso hicieron, como definir los bordes, márgenes... en sentido horario empezando por el superior. Opiniones habría para haberlo hecho diferente: el derecho primero y hacia abajo (antihorario) pero...

Un saludo, harvey

P.D.: Y no, no recuerdo haberme encontrado nunca el "box-sizing" dentro de lo estándares de css2.1
P.D.: Lo que sí me imagino que haces es usar un doctype válido y poner a cero tu css (reset css)

Uso un doctype válido porque creo que es lógico que las cosas esten normalizadas a fin de facilitar tanto la labor del que hace la web como la navegación eficaz del usuario. No tengo nada en contra del establecimiento de un estandar. El problema es que en este caso en concreto me parece que lo que se establece como estandar no es lo mas coherente.

Y si tengo que aceptar que para maquetar una web que a priori parece dividida en tres espacios voy a tener que considerar nueve espacios en concepto de los espacios en si y sus correspondientes paddings (y suponiendo que no tenga bordes) desde un primer momento, pues bien, que remedio. Pero si hubiera una propiedad aceptada como ese box-sizing:border-box que me permitiera elegir como voy a trabajar pues claro que la usaría. La única pega que le encontraba dicha propiedad es que exigia ponersela a cada elemento en el que la usaras cuando lo razonable sería declararla a nivel de todo el documento (sería raro querer trabajar a ratos de una manera y a ratos de otra)

[Mikmoro]

EDITO: había escrito un hermoso discurso, tanto como innecesario. Coincido con kseso? en que evidentemente es tu opinión, y no creo que jamás nos pusiéramos de acuerdo. Creo que es necesario contrastar mucha mucha información para afirmar algo tan categóricamente.

[PHPcool]

Es fácil man, solamente ponle los prefijos css

Código CSS:

box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;