1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

IE / Problema com o line-height

Discussão em 'Web Development' iniciada por Pikatxu, 6 de Outubro de 2007. (Respostas: 3; Visualizações: 1574)

  1. Pikatxu

    Pikatxu Power Member

    Bom, para variar, cá estou de volta de mais um problema IE/CSS. Desta vez resolvi melgar o pessoal a ver se alguem já passou por isto e me pode ajudar.

    O problema:
    [​IMG]
    IE
    [​IMG]
    Firefox

    Como podem ver falta ali uma linha debaixo do "pulvinar" e nao percebo o porquê. A box é daquele tamanho e suportava bem mais texto.

    As CSS's:
    .texto {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:0.625em;
    font-style:normal;
    font-weight:normal;
    color:#000000;
    line-height:1; /* adicionada porque o IE parece que por defeito isto vem a 2*/
    }

    .textholder{
    margin:18px 18px 0px 14px;
    width:156px;
    height:112px;
    float:left;
    vertical-align:top;
    text-align:left;
    padding:0px;
    border:#0000CC thin solid; /* para ver bem o fuckup */
    }


    Alguém?

    Obrigado.
     
  2. hYpe

    hYpe [email protected] Member

    O line-height não tem que levar unidades?

    Tipo line-height: 1em; ? Ou em px's ?
    Tenta 'line-height: normal'; mas sinceramente parece-me e' q a caixa está a herdar padding..

    Instalar o FireBug no Firefox.. Depois carregas com o botão do lado direito em cima da caixa e fazes 'Inspect Element'. Em baixo do lado direito vao-te aparecer todas as caracteristicas da caixa.. Logo ves se se passa alguma coisa de errado, com a qual o FF consegue lidar e o IE não..

    Cumps

    EDIT:
    adiciona isto ao .texto :
    ' float: left; '

    EDIT2:
    Just for the record:
    IE/Win continues to amaze us. This demo will describe a bug where the line-height is incorrectly rendered if the line contains a replaced element. Very simply, if the default line-height is changed to a larger value, the line spacing above and below any text line that contains a replaced element, such as a small emoticon, will be half of the spacing seen elsewhere in the text.

    source:
    http://www.positioniseverything.net/explorer/lineheightbug.html
     
    Última edição: 6 de Outubro de 2007
  3. Pikatxu

    Pikatxu Power Member

    Obrigado pelo reply hYpe.

    Bom, ao que parece o problema todo era gerado pelo vertical-align na div. (textholder) Troquei as valigns para o text e voilá, problema resolvido, nem precisei de usar o line-height.

    Edit: boa dica quanto ao firebug. Tinha instalado mas só para debug em JS. Nunca tinha prestando atenção ao inspect, excelente para ver as heranças! :)

    Quanto ao line-height, pode levar 3 tipos de valores, numero só, em e px. ;) Numero só é o defeito para uma linha.
     

Partilhar esta Página