Hacer que una página web se muestre correctamente en todos los principales buscadores de hoy es una tarea que consume mucho tiempo.¿Cuál es la forma más fácil o más rápida de hacer que CSS represente lo mismo en todos los navegadores?
¿Existe alguna manera fácil de hacer un estilo CSS idéntico en cada navegador? ¿O al menos tienes algunos consejos para facilitar este trabajo?
Estoy de acuerdo con todos los "reset" sugerencias y las sugerencias marco "rejilla", pero yo quiero añadir un poco de asesoramiento: La meta de idéntico en cada navegador es, en términos prácticos, inalcanzable porque no puede controlar al cliente. Ejemplo: fuentes.
Declara sus estilos de fuente en CSS pero algunas máquinas Linux, algunas Mac, algunos navegadores móviles, no tendrán la fuente que ha especificado. Esta variación conduce a diferentes longitudes de texto y envoltura. Luego está la varianza de las versiones del navegador y los sistemas operativos que ejecutan cada uno; cómo diferentes navegadores implementan funciones de zoom; y el tamaño del texto puede ser ajustado por el usuario final. La representación idéntica es simplemente un objetivo inalcanzable.
¡Pero toma el corazón! Esta es la parte "artística" de CSS: poder ser flexible en su diseño de manera que las variaciones entre los navegadores, los sistemas operativos y los ajustes del usuario final se manejen con elegancia. No se esfuerce por una representación idéntica; debe esforzarse por lograr consistencia de marca + experiencia apropiada + flexibilidad.
intente utilizar un restablecimiento de css como eric meyer reset o YUI reset. ayudará pero no es una manera fácil o perfecta de hacer que las cosas se vean idénticas en cada navegador
El Yahoo css foundation ayudará. Para estandarizar el formateo, querrás reiniciar y basar.
El Yahoo User Interface (YUI) tiene una implementación CSS Reset que busca formar una línea base común en todos los navegadores. Esto debería acercarte bastante.
Esta es realmente una pregunta difícil de responder, ¿todos los navegadores? ¿Esto significa todas las versiones? Navegadores móviles? ¿Solo los de "línea principal" (ópera, firefox, es decir, safari)?
No encontrará cumplimiento total en las cosas de nivel 1 de CSS, por lo que habrá algunos ajustes que tendrá que realizar. En mi experiencia, Opera, Firefox y Safari se comportan de manera similar cuando se trata de cosas básicas (posicionamiento, flotadores, divs, etc.) y es solo IE por lo que tendrás que ajustar.
También podría utilizar una biblioteca o un marco CSS probado como las redes yahoo (http://developer.yahoo.com/yui/grids/) o una interfaz programática como el conjunto de herramientas web de Google (http://code.google.com/webtoolkit/).
No necesariamente todos menos los principales – nicudotro
Pruebe su CSS en todos los navegadores sobre la marcha. Es horrible conseguir el píxel perfecto en el navegador de tu mascota solo para descubrir que está lejos en otros navegadores.
Este enfoque lo ayudará a entender qué funcionará en los principales navegadores.
Tiendo a encontrar que el aspecto idéntico de CSS se produce si utilizo flotadores para diseñar la página en cuadros. El modelo de flujo funciona como usted cree que debería, y se procesa fielmente en todos los principales navegadores. Sé que algunos me dirán que el uso de muchos flotadores es incorrecto, pero funciona sorprendentemente bien.
De acuerdo con las carrozas. Hace poco estaba haciendo que el sitio web de mi cartera (con CSS bastante complejo) utilizara flotadores. Y me sorprendió cuando lo revisé en los navegadores. Estaba haciendo lo mismo en todos los navegadores excepto IE6. – Dmitris
He tenido éxito usando el restablecimiento de Eric Meyer CSS disponible here. Básicamente, anula un grupo de estilos CSS del navegador que son predeterminados. Una vez dicho esto, todavía hay muchas diferencias (probablemente algunas de las que le molestan son las diferencias de modelo de caja, etc. En ese caso, podría ser mejor usar Blueprint para manejar la mayoría de sus CSS.
Blueprint tiene una nueva URL: http://www.blueprintcss.org/ – Colin
Usar CSS Reset le dará a todo el mismo punto de partida, pero no ayudará mucho con los cambios que realice más allá de ese punto de partida. No puedo decir que realmente exista una manera fácil. Una solución es apegarse a un conjunto limitado de CSS que sabes que funciona bien en todos los navegadores que deseas admitir. Es posible que no puedas hacer muchas de las cosas más sofisticadas de CSS, pero tu tiempo de depuración de CSS debería reducirse considerablemente.
También podrías consultar un marco para css como Blueprint o css-boilerplate o yui grids framework. Por lo general, estos marcos te configuran con un conjunto estándar de definiciones de clase css que puedes aplicar a elementos para diseñarlos de una manera específica y definida.
Si tiene que ser perfecto para píxeles, necesitará usar px en sus hojas de estilo.Use un css reset stylesheet, luego ajuste todo en función de los píxeles.
Para asegurarse de que su CSS funciona correctamente en diferentes navegadores, puede encontrar un servicio como BrowserShots útil, sin embargo, creo que le resultará muy difícil obtener una coherencia absoluta en todos los navegadores.
Mi preferencia personal es utilizar el marcado y el CSS correctos, omitir cualquier navegador y diseños para degradar con elegancia.
Siempre hemos creado una hoja de estilo CSS básico que funciona en los navegadores W3C Totalmente compatible como Firefox y luego crearon hojas de estilo específicas del navegador alternativo para resolver cualquier problema de estilo en otros navegadores, es decir, IE6, IE7 etc.
Puede usar el siguiente código dentro del HTML para seleccionar hojas de estilos de IE apropiadas.
<!--[if lte IE 6]>
<link href="/css/eqtr_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
También puede utilizar sitios web en línea, tales como browsershots para ver su sitio en diferentes navegadores.
En la base no hay garantía de que tal cosa funcione alguna vez a la perfección. Mientras los desarrolladores de los navegadores encuentren maneras de hacer lo suyo en lugar de la forma "estándar" de hacer las cosas, usted tendrá diferencias.
He tenido resultados positivos usando el Yahoo User Interface Base CSS, pero al final incluso eso no pudo hacer frente a los elementos más complejos que deberían ser posibles con CSS.
Al final fui por una solución menos que perfecta y simplemente hice mi verificación de marco si hubiera configurado hojas de estilo específicas del navegador.
Aquí hay un fragmento de PHP para ilustrar. Lo siento por la solución específica del idioma, pero creo que la idea es lo suficientemente clara para aplicar en diferentes idiomas:
$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sStyle."\" />\n";
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension))
$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension."\" />\n";
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension))
$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension."\" />\n";
Sin archivos que faltan, no hay etiquetas no reconocidas u otro código que pueda sofocarse algunos navegadores, las páginas de la marco render como queremos que se muestren en todos los navegadores solicitados por nuestros clientes. Lo que es más importante, lo hacen sin producir errores (es decir, una Consola de error vacía en Firefox) que hace que la depuración sea mucho más fácil cuando se encuentra con un error.
Recomiendo echar un vistazo a Blueprint y 960 Grid System.
Además de realizar restablecimientos e incluir correcciones de CSS para Internet Explorer, ambos le proporcionarán una cuadrícula de diseño fácil de usar que se ocupará de muchos ajustes tediosos al crear diseños basados en CSS.
Cumplir con un estricto doctype también soluciona muchas de las diferencias. Además, generalmente agrego una etiqueta < div> para encerrar todo dentro del cuerpo, porque he notado una diferencia en cómo Firefox vs, es decir, maneja la etiqueta corporal como un elemento de nivel superior.
me gusta desarrollar contra Firefox en primer lugar, a menudo utilizando YUI de Yahoo para la restauración (y rejillas para la estructura básica de la página), y el uso de IE directivas condicionales para anular los formatos que IE, en toda su – un dobladillo – sabiduría maneja de manera diferente
índice.html
<head>
<link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/base-min.css" />
<link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/grids.css" />
<link rel="stylesheet" type="text/css" media="all" href="styles/screen.foo.css" />
<link rel="stylesheet" type="text/css" media="print" href="styles/print.foo.css" />
<!--[if gt IE 5]> <link rel="stylesheet" type="text/css" href="styles/ie.screen.foo.css" /> <![endif]-->
</head>
En primer lugar usted podría intentar un restablecimiento, al igual que algunas otras personas que se mencionan aquí, se puede hacer un margen rápida y el relleno a cero con este pedazo de CSS:
*{margin: 0; padding: 0}
Al diseñar su css que asegúrese Estoy usando un navegador moderno y compatible con los estándares (personalmente recomendaría Firefox 3 que tiene un excelente web developer toolbar, con el cual puede editar css desde su navegador). Si lo hace, su sitio se verá bien en todos los navegadores nuevos.
La mayoría de los problemas de diseño que tendrá probablemente sean causados por el wrong interpretation de Internet Explorer del modelo de caja, puede evitar esto al nunca establecer un ancho y margen o relleno al mismo tiempo. Esto puede parecer molesto pero no lo es, solo aplica el relleno o margen al contenido que está dentro de tu elemento que tiene un ancho establecido.
Por supuesto, existen más problemas, pero este es probablemente el más común y molesto, para cuestiones más específicas siempre puedes probar google. Además, últimamente estoy considerando ignorar IE6 y navegadores más antiguos si la audiencia de mi sitio lo permite, en un sitio de diseño web nunca encontrarás a nadie que use IE6, ¿verdad? Por supuesto, esto no es posible a menudo ya que muchas personas (locas) siguen usando IE6.
Además, si necesita probar su sitio browsershots es una forma gratuita de hacerlo rápidamente.
Mi trabajo solo permite utilizar IE6 o NN4. No estamos locos, somos forzados. :) – rball
IMO se ve obligado a utilizar los conteos IE6 como una forma de abuso en el lugar de trabajo. ;) – DisgruntledGoat
Organice su flujo de trabajo de la siguiente manera y se reducirá una gran pérdida de tiempo.
Si se atiende a esos elementos, muchos de los problemas más comunes no aparecerán.
PD Un elemento que olvidé mencionar fue utilizar los validadores en W3.
Por lo general, desarrollo contra el W3C CSS validator, luego verifico que las cosas se vean como yo quiero en los respectivos navegadores. Validar va un largo camino hacia un comportamiento consistente.
A veces voy a quitar la página solo a estilos que se validan y se muestran correctamente en los navegadores principales a los que me dirijo, a veces lo complementa con ajustes específicos del navegador como han mencionado otros carteles.
marcos de css ciertamente ayudan, aunque pueden ser muy pesados debido a un montón de estilos que no necesitará ni usará.
echa un vistazo Targeting IE Using Conditional Comments and Just One Stylesheet en Posición lo es todo por una gran técnica para alimentar los estilos específicos de la versión IE sin utilizar hacks CSS; esto le permite mantener las reglas de estilo juntas por selector en lugar de por navegador.
Asegúrese de incluir el DOCTYPE apropiado.
Todavía veo gente que regularmente se enfrenta a problemas con el modelo de caja porque olvidó incluir un doctype. Sin el doctype apropiado, Internet Explorer se renderiza en "modo peculiar", y también lo hacen otros navegadores en menor medida. Si incluye el tipo de documento correcto, los navegadores cambian al "modo estándar" y se comportan de manera similar entre sí.
Aparte de eso, si haces esto para ganarte la vida, recogerás y recordarás rápidamente esos casos de esquinas sutiles donde IE interpreta cosas ligeramente diferentes de Firefox, etc. Con alguna experiencia es completamente posible diseñar toda la página en su navegador favorito y solo realiza ajustes muy pequeños en el CSS para hacerlo casi perfecto en otros navegadores.
Desarrolla primero para Firefox. Puedes probar en otros navegadores pero no te preocupes por las soluciones hasta que funcione como lo quieres en Firefox. Luego pase a los otros navegadores basados en estándares, a saber, Safari y Opera. Si ha escrito buenos HTML y CSS, no debería requerir mucho trabajo en estos navegadores.
Luego pasa a la bestia del lote, IE. Use los comentarios condicionales para dirigirse a versiones específicas de IE. IE 7 debería ser bastante fácil, para IE 6 puede que tenga que sacrificar ciertas partes del diseño para que funcione fácilmente. Esto está bien, IE 6 está en camino, así que no se preocupe si no lo admite por completo. Los PNG transparentes suelen ser el mayor problema, AlphaImageLoader simplemente no funciona en todas las situaciones.
Como se mencionó anteriormente, un restablecimiento de CSS como el de Eric Meyer es un buen punto de partida; úselo para crear su propio restablecimiento en función de sus necesidades. Aparte de eso, la respuesta es simple: no hay una bala de plata.
Aplicando el diseño del sombrero del papel de estaño
CSS:
*{display:none}
Ok, eso no es COMPLETAMENTE navegador cruzado. No todos los navegadores admiten CSS. –
Es mucho tiempo al principio, especialmente si usted está STILLING aprendizaje de las cuerdas de DIV + CSS. Sin embargo, después de haber practicado lo suficiente y haber encontrado suficientes problemas y haberlos resuelto todos, usted tendrá el conocimiento de lo que FUNCIONA y lo que NO FUNCIONA.
Es entonces que usted sabe cómo escribir el estilo más compatible posible en primer lugar, ahorrando todo el tiempo en degugging y rara vez tiene algún problema con cualquiera de los principales navegadores modernos: IE6, IE7, FF2, FF3, Opera 9, Safari 3 Win/Mac.
Sí, es posible y tan fácil como se pueda. Practica y conquista uno por uno, entonces sabes cómo hacer las cosas bien en el primer intento.
Bueno, el único monstruo desconcertante debería ser IE6, supongo. Es en navegador. Aparte de eso, ff2, ff3, opera 9, safari win/mac, ie7, ie8 son relativamente similares en el motor de renderizado, al menos con muchos menos errores que con IE6.
que tienen unos mejores prácticas para que (uno que acaba de comenzar su viaje en CSS) en la codificación para conseguir la compatibilidad máxima CSS:
Según mis experiencias, estas son cosas que realmente te ayudarán a resolver problemas potenciales. Úselos y eliminan sus posibilidades de tropezar con cualquier problema que consuma tiempo por 80%. De hecho, hay más consejos triviales que estos cuando se trata de etiquetas específicas, pero vamos a llamarlo un día.
usted está haciendo la pregunta equivocada, porque esta es la única manera de responder a eso:
<!DOCTYPE html>
<html>
<head>
<style>* { background: #fff }</style>
</head>
<body></body>
</html>
No hay mucho de una respuesta, ¿verdad? :)
Todos los demás están aquí - hacer su trabajo CSS en todos los navegadores, no trate de hacerlo tienen el mismo aspecto. No puedes.
Do websites need to look exactly the same in every browser?
Aparte de eso, supongo que la práctica hace al maestro. Y lea sobre todo lo que puede encontrar sobre los problemas potenciales con los que puede tropezar.Con los archivos de reinicio, los tipos de documento correctos, los validadores y los marcos pueden ayudarlo en cierta medida, pero al final tiene el control del código y solo sabe exactamente cómo quiere que se vea. El código podría ser válido y el navegador podría hacer exactamente lo que le indicó y aún no se parece a lo que desea.
Cuanto más use CSS para el diseño, cuantos más problemas encuentre, más problemas encontrará y más aprenderá. Después de bastantes años de hacer diseños completamente con HTML semántico estructurado y CSS ordenado, rara vez tengo que perder mucho tiempo corrigiendo fallas en uno u otro navegador.
Las fuentes tampoco son uniformes cuando son de la misma fuente. Las diferencias de configuración de PPP pueden hacer que las cosas salgan fuera de proporción, y puede tener un diseño que funcione en todas las máquinas de Windows en Firefox, pero está roto en todas las máquinas de Linux. –
Para llevar el punto un poco más allá, la red es, por su propia naturaleza, heterogénea, lo que significa que los agentes de usuario que acceden a ella son todos diferentes. Ir en contra de esto y esperar que las cosas se vean y se comporten igual en todos los agentes es un error. – roryf
No podría estar más de acuerdo. Es una pendiente resbaladiza que termina con diseños de "altura fija" (escalofrío). – da5id