Melhor medida de forma a maximizar a compatibilidade com browsers?

Boas,

Penso que o ideal seria usar o em. Principalmente por ser "escalável" (se é que posso usar este termo aqui). Mas o uso tem que ser feito "inteligentemente".

Uma maneira de ver as coisas é que existem vários browsers e vários tamanhos de ecrã.

Usando em podes definir que, por exemplo, os espaços entre os textos aumentam consoante o tamanho da fonte usada.
 
Não é por utilizares px em % que consegues compatibilidade.
As diferenças entre browsers são muitas vezes nos valores padrão das propriedades CSS por isso uma das coisas que se costuma fazer é redefinir todas as proprieadades logo no inicio.
Código:
* {
    padding: 0;
    margin: 0;
    border: 0;
    }
Também é possivel ter código apenas destinado a um navegador
<!--[if IE]> ... .... ... <![endif]-->

Ou até mesmo visando uma versão especifica
<!--[if IE 6]> ... .... ... <![endif]-->

É possivel ter duas folhas de estilo:

<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="para_ie.css" />
<![endif]-->
Documentação da microsoft
 
Última edição:
Não é por utilizares px em % que consegues compatibilidade.
As diferenças entre browsers são muitas vezes nos valores padrão das propriedades CSS por isso uma das coisas que se costuma fazer é redefinir todas as proprieadades logo no inicio.
Código:
* {
    padding: 0;
    margin: 0;
    border: 0;
    }
Também é possivel ter código apenas destinado a um navegador
<!--[if IE]> ... .... ... <![endif]-->

Ou até mesmo visando uma versão especifica
<!--[if IE 6]> ... .... ... <![endif]-->

É possivel ter duas folhas de estilo:

<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="para_ie.css" />
<![endif]-->
Documentação da microsoft

K0ma isso são os comandos exactos ou só exemplos?
tens algum site de referencia que aconselhes a visitar para perceber como isso que descreves funciona?

ty
 
Para as diferentes folhas de estilo e assim : http://maujor.com/tutorial/condcom.php
penso que o K0mA tem razão, não é por usares em ou px que vai mudar alguma coisa, usar % pode te ajudar a resolver problemas com a resolução dos ecrãs.
Quanto ao redefinir propriedades à partida acho a melhor solução.
visto que os padding's; border's e margin's diferem de explorador para explorador, pequenas diferenças mas que em casos rigorosos fazem diferença.
 
Quanto ao redefinir propriedades à partida acho a melhor solução.
visto que os padding's; border's e margin's diferem de explorador para explorador, pequenas diferenças mas que em casos rigorosos fazem diferença.

A situação é mesmo essa. Tenho vários componentes dentro de uma tabela, com estilos diferentes, que têm de encaixar "na perfeição". No chrome e firefox funciona tudo bem, mas no IE as coisas aparecem mais "apertadas" >(
 
Última edição:
Para as diferentes folhas de estilo e assim : http://maujor.com/tutorial/condcom.php
penso que o K0mA tem razão, não é por usares em ou px que vai mudar alguma coisa, usar % pode te ajudar a resolver problemas com a resolução dos ecrãs.
Quanto ao redefinir propriedades à partida acho a melhor solução.
visto que os padding's; border's e margin's diferem de explorador para explorador, pequenas diferenças mas que em casos rigorosos fazem diferença.

Corrige-me se estiver errado, mas usando % no tamanho de um objecto ele não atribuir um valor relativo ao tamanho do ecrã usado?

Por exemplo: se usares um ecrã 800x600 e colocares 60% no tamanho do tabela, ele atribui-lhe 480px (algo perto disso) à mesma, certo?
Mas se usares um ecrã maior, qual seria o tamanho da tabela? Proporcional ao ecrã, certo? Se ele tiver uma imagem na tabela fica com espaços em branco ou estica, conforme a parametrização da img. E mesmo o texto ficaria mais disperso...

Mas, mais uma vez, concordo com o Koma e colocaria se calhar vários stylesheets, conforme o utilizador / visitante da página, para prever tamanhos de ecrã, de browser, etc...
 
Exemplo da wikipedia:
Código:
        <link rel="stylesheet" href="/skins-1.5/common/shared.css?230" type="text/css" media="screen" />
        <link rel="stylesheet" href="/skins-1.5/common/commonPrint.css?230" type="text/css" media="print" />
        <link rel="stylesheet" href="/skins-1.5/monobook/main.css?230" type="text/css" media="screen" />
        <link rel="stylesheet" href="/skins-1.5/chick/main.css?230" type="text/css" media="handheld" />
        <!--[if lt IE 5.5000]><link rel="stylesheet" href="/skins-1.5/monobook/IE50Fixes.css?230" type="text/css" media="screen" /><![endif]-->
        <!--[if IE 5.5000]><link rel="stylesheet" href="/skins-1.5/monobook/IE55Fixes.css?230" type="text/css" media="screen" /><![endif]-->
        <!--[if IE 6]><link rel="stylesheet" href="/skins-1.5/monobook/IE60Fixes.css?230" type="text/css" media="screen" /><![endif]-->
        <!--[if IE 7]><link rel="stylesheet" href="/skins-1.5/monobook/IE70Fixes.css?230" type="text/css" media="screen" /><![endif]-->
        <link rel="stylesheet" href="/w/index.php?title=MediaWiki:Common.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=2678400&amp;action=raw&amp;maxage=2678400" type="text/css" />
        <link rel="stylesheet" href="/w/index.php?title=MediaWiki:Print.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=2678400&amp;action=raw&amp;maxage=2678400" type="text/css" media="print" />
        <link rel="stylesheet" href="/w/index.php?title=MediaWiki:Handheld.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=2678400&amp;action=raw&amp;maxage=2678400" type="text/css" media="handheld" />
        <link rel="stylesheet" href="/w/index.php?title=MediaWiki:Monobook.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=2678400&amp;action=raw&amp;maxage=2678400" type="text/css" />
        <link rel="stylesheet" href="/w/index.php?title=-&amp;action=raw&amp;maxage=2678400&amp;gen=css" type="text/css" />
        <!--[if lt IE 7]><script type="text/javascript" src="/skins-1.5/common/IEFixes.js?230"></script>
        <meta http-equiv="imagetoolbar" content="no" /><![endif]-->
 
Tenham também em conta as "cacetadas" que se podem dar no css:


.myClass{
width:200px;
!width:210px;
}

Quando se usa o ! é específico para o IE6/7 :lol:

Outra é para centrar conteúdos no Firefox. Para o IE o align="center" ou o textalign:center parecem servir bem, mas no Firefox tem que ser margin:0px auto; para centrar conteúdo :cool:
 
A situação é mesmo essa. Tenho vários componentes dentro de uma tabela, com estilos diferentes, que têm de encaixar "na perfeição". No chrome e firefox funciona tudo bem, mas no IE as coisas aparecem mais "apertadas" >(

isso é problema do box-model do iexplorer =)
evita usar paddings, e começa a usar margins.
 
isso é problema do box-model do iexplorer =)
evita usar paddings, e começa a usar margins.

Problema resolvido! O problema estava numa tabela que eu estava a por dentro de um fieldset, no qual não defini o padding. Então por defeito o IE devia estar a por uns 3 ou 4 px e ficava tudo mal. Defini o padding para 1px e já fica tudo certinho ;)

Obrigado de qq forma
 
mmm... tens boa soluçao para evitar que isso aconteça no futuro =)
usa o reset css da yahoo para eliminar essas pequenas diferenças entre browsers

so tens de acrescentar
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">

no head do documento =)

podes ler mais sobre isso aqui (so estou a sugerir o da yahoo porque esta mesmo muito completo... mas existem outros =) )
http://developer.yahoo.com/yui/reset/
 
pessoal ja comecei a ter estes problemas de incompatibilidade entre browsers.
como tal usei alguns "reset.css" mas não consigo depois formatar divs, tabelas, etc.
simplesmente não ficam como eu alterei o class deles. qual será o problema?
 
Back
Topo