jquery - sea - porque mi pagina web se ve diferente en navegadores
¿Por qué diferentes navegadores renderizan el mismo HTML de manera diferente? (5)
Esta es una página html:
<html>
<head>
<title>
Frame Set
</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="frame.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
var winSize = $(window).width();
var margin = (winSize-1000)/2;;
$(''#main'').css({''margin-left'':margin,''margin-right'':margin});
}
)
$(function() {
$(".frame").each(function() {
var width = ($(this).find(''.h'').width()),
height = $(this).find(''.l'').height(),
pad = $(this).find(''.h'').position().left,
actWidth = width + 10,
nHeight = height - (height * 2),
rLeftMargin = actWidth - 1,
bWidth = actWidth;
$(this).find(''.r'').css({''margin-top'':nHeight, ''margin-left'':rLeftMargin, ''height'':height});
$(this).find(''.h'').css({''height'':25});
$(this).find(''.b'').css({''width'':bWidth, ''margin-top'':0});
});
});
</script>
</head>
<body>
<div id="main" align="center" style="width:1000px; height:100%; text-align:left;">
<div id="inner1" style="width:100%; height:20%; float:top; margin-bottom: 20px;">
<div id="inner11">
<div class="frame">
<div class="h" style="width:100%">Header</div>
<div class="l" style="height:93%"></div>
<div class="r"></div>
<div class="b"></div>
</div>
</div>
</div>
<div id="inner2" style="width:100%; height:60%;">
<div id="inner21" style="width:69%; float:left; margin-left: 1px; margin-right: 1px;">
<div class="frame">
<div class="h" style="width:100%">Left Frame</div>
<div class="l" style="height:93%"></div>
<div class="r"></div>
<div class="b"></div>
</div>
</div>
<div id="inner22" style="width:29%; float:right; margin-left: 1px; margin-right: 1px;">
<div class="frame">
<div class="h" style="width:100%">Right Frame</div>
<div class="l" style="height:93%"></div>
<div class="r"></div>
<div class="b"></div>
</div>
</div>
</div>
<div id="inner3" style="width:100%; height:20%; float:bottom; margin: 2px 2px 2px 2px;">
<div id="inner23">
<div class="frame">
<div class="h" style="width:100%">Footer</div>
<div class="l" style="height:93%"></div>
<div class="r"></div>
<div class="b"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Esta es la salida de Mozilla:
Esta es la salida de IE8:
Cuál es el problema ?
Cómo arreglar esta página
Vamos a ayudarte un poco aquí ...
Usar un doctype
Ver la respuesta de @ Topera.
Para hacer que todo el centro esté alineado.
Por favor, no use
var winSize = $(window).width();
var margin = (winSize-1000)/2;;
$(''#main'').css({''margin-left'':margin,''margin-right'':margin});
}
En su lugar, usa el margin: 0 auto propiedad CSS margin: 0 auto . Como regla general, siempre use una solución CSS en lugar de un Javascript cuando sea posible.
Para crear columnas de igual altura.
Ver:
http://www.positioniseverything.net/articles/onetruelayout/equalheight
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Usa la terminología correcta y mejor nombre de clase
Para evitar confusiones, no haga referencia a los elementos sin marco como marcos. Para obtener más información sobre qué son los marcos, consulte: http://reference.sitepoint.com/html/elements-frames-windows
Da a tus clases nombres significativos. La razón de esto es la misma para cualquier otro idioma, de modo que cuando regrese más tarde tres meses después, no se rascará la cabeza en las clases llamadas l , r y h .
Utilizar HTML semánticamente válido.
Los atributos align y align text-align están oficialmente en desuso; Por favor, vea la solución anterior para alinear las cosas con el centro y la propiedad CSS text-align lugar.
Los elementos HTML le dan un significado al contenido en el que están envueltos. Los encabezados que tiene para cada ''marco'' deben marcarse con encabezados <h2> o <h3> lugar - mientras que los div s son elementos genéricos de nivel de bloque sin significado, el h1 a h6 conjunto de elementos (por falta de una palabra mejor) le dice al navegador que el texto que contiene es encabezados.
Modelo de caja CSS
Por favor, eche un vistazo a cómo funcionan el modelo de caja y los flotadores en CSS. bottom y top no son valores válidos para la propiedad float CSS.
http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/#cssboxmodels
http://reference.sitepoint.com/css/boxmodel
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
El verdadero problema aquí
No está con los navegadores. IE8 sorprendentemente se comporta mucho menos que sus predecesores. Intenta escribir mejor HTML y CSS en su lugar.
use un doctype: doctypes en el momento que usaría -> XHTML 1.0 Strict, XHTML 1.1, HTML5 (no lo haga si no está familiarizado con los problemas que podrían surgir)
use un reset: eric meyers reset por xample es bueno
use un clearfix (y sepa cuándo usarlo), por ejemplo, el nuevo clearfix de Jeff Starr
Usando estas tres cosas, es un buen comienzo para que su sitio web se vea igual en todos los navegadores. después de eso, debe aprender sobre errores de navegador personalizados, como error de doble margen y así sucesivamente.
El problema es que no todos los navegadores utilizan el mismo motor de representación o reglas de representación. Esta es una fuente constante de dolor para los desarrolladores web, y no es algo que parece desaparecer pronto.
Utilice CSS siempre que sea posible, ya que los navegadores tienden a cumplir mejor las reglas estrictas de las hojas de estilo. Más allá de eso, buena suerte y bienvenidos a web dev :)
Extraña la etiqueta <!DOCTYPE> , en la primera línea de la página.
Ex:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Si no lo pones, IE activará el quirks mode y sucederán cosas muy extrañas. Cuando un navegador activa el modo de peculiaridades, muchas cosas cambian, como modelo de caja .
NOTA: muchos navegadores tienen un modo peculiar, no solo IE (sé que Firefox también lo tiene).
Más sobre el modo de caprichos .
Lista de doctypes .
Para ser navegador cruzado necesitas varias herramientas, mucha experiencia y, en caso de IE, mucha suerte. Además de las otras respuestas aquí, puede usar Yahoo CSS que le da una base común (todos los navegadores no tienen los mismos valores predeterminados): http://developer.yahoo.com/yui/reset/