Primer missatge
Chus
Fa poc que he descobert la pàgina de l'Arnau i ell m'ha convidat a
unir-me al grup i exposar aquí els meus dubtes.
Soc molt nou en això dels css, així que segurament ho trobareu molt
trivial, tot i així...
Ja coneixia de sentides que IE i FF no mostren de la mateixa manera
els mateixos continguts, però sempre havia pensat que era degut a
manca de definició en els continguts (es a dir, utilització de valors
per defecte, diferents per cada navegador) i que, exemples senzills i
ben definits haurien de ser idèntics, però ja he pogut comprovar que
era molt ingenu.
He creat aquest petit exemple:
...
<div id="main">
<div>Esto está fuera del div</div>
<div id="content">Este es el contenido del div.</div>
<div>Esto está fuera del div</div>
</div>
...
Amb aquests estils:
@CHARSET "UTF-8";
* {
font-size: 20px; margin: 0px; padding: 0px; border: 0px;
}
body {
background-color: red; border: 1px solid black; padding: 1px;
}
div {
background-color: green; border: 1px solid black; padding: 1px;
}
#main {
background-color: blue;
}
#content {
background-color: white; padding: 0px;
}
I he pogut comprovar que l'alçada dels div #content (de fet la de
tots) és diferent.
En FF es de 23px mentre que en IE és de 22px.
Tenint en compte que la font és de 20px, d'on surten aquests px
extra?
Ja no pregunto per que son diferents per que imagino que la resposta
serà per que un és un i l'altre no...
Gràcies per endavant.
Chus
Arnau Siches
Chus wrote:
> He creat aquest petit exemple:
> ...
(L'he mogut al final del mail)
> I he pogut comprovar que l'alçada dels div #content (de fet la de
> tots) és diferent.
> En FF es de 23px mentre que en IE és de 22px.
>
> Tenint en compte que la font és de 20px, d'on surten aquests px
> extra?
L'inconsistència et vé per la diferència de còmput del valor de la
propietat `line-height`
Si proves a afegir
body {
line-height: 20px;
}
veuras com tots et responen igual.
Cal fer notar que en Firefox de Mac l'alçada ja computa 20px, o sigui
3px de diferència respecte la de Firefox de Windows.
L'exemple d'en Chus:
> <div id="main">
> <div>Esto está fuera del div</div>
> <div id="content">Este es el contenido del div.</div>
> <div>Esto está fuera del div</div>
> </div>
> ...
>
> Amb aquests estils:
> @CHARSET "UTF-8";
> * {
> font-size: 20px; margin: 0px; padding: 0px; border: 0px;
> }
> body {
> background-color: red; border: 1px solid black; padding: 1px;
> }
> div {
> background-color: green; border: 1px solid black; padding: 1px;
> }
> #main {
> background-color: blue;
> }
> #content {
> background-color: white; padding: 0px;
> }
>
--
arnau siches
css.artnau.com