2011 07 julho de 2011

A questão da CSS corte

Tinha lido isso em algum blog ... pensei que era bom para catalogar isso para ref futuro .... também poderia ser uma questão importante entrevista que você pediu a alguns dias ....

Escreva um trecho de CSS que irá exibir um parágrafo em azul em navegadores mais antigos, os navegadores mais recentes em vermelho, verde e preto em IE6 no IE7

#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}

sem comentários | tags: , | Postado em CSS

2008 Outubro 10, 2008

Não para o IE Only - seletores filho CSS não funcionam no IE

CSS para não-IE Navegadores: Não é nenhuma novidade para os desenvolvedores CSS que, seletores filho CSS como no exemplo abaixo, não parecem funcionar no IE.

por exemplo div> span {alguns css}, que significa "quando um elemento span é uma criança (e não um neto ou filho grande grande etc) de um elemento de divisão".

Mas nós usamos essa CON a nosso favor. Historicamente, o selector de criança tem sido utilizado para ocultar comandos CSS de IE. Simplesmente colocando html>body na frente de qualquer comando CSS IE irá ignorá-lo:

html>body .foo { CSS commands go here ;}

Isso funciona porque <body> é sempre um filho de <html> - pode nunca ser, obviamente, um neto ou bisneto de <html> .

Agora que o IE 7 entende o seletor filho, você tem que inserir uma tag de comentário vazio logo após o sinal de maior que o IE 7 não vai, então, entender este selector (quem sabe por que?) E, portanto, ignorar totalmente este comando CSS.:

html> /**/ body .foo { CSS commands go here ;}

Se não tiverem já visto estes antes, ter uma leitura através do seguinte bem

sem comentários | tags: e e e | Postado em Quirks navegador e CSS

2008 04 de outubro de 2008

Desaparecimento de HTML / DIV elementos no Internet Explorer [IE]

Como de costume, um dos muitos alguns problemas estranhos com o IE e isso deve-se fileiras em TOP 10 de Quirks IE.

Declaração do problema (Este era o meu problema, talvez você tenha maus comportamentos semelhantes):
Eu tenho muitos DIV está na página com a classe "sectionhead", que nada mais é título de uma seção na página. Então, eu tenho um estilo parecido com isto

. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px;}

O div é uma barra cinza claro com algum texto preto. O que acontece no IE é alguns desses cabeçalhos de seção são exibidos ok, mas alguns são invisíveis, até que, você rolar a página ou clicar em algo na página, etc Às vezes eles tendem a desaparecer quando você clicar no 'alt' tecla quando você page down ou deslocar-se com a barra de rolagem. Eles parecem às vezes reaparecer quando você recarregar (F5) a página. Eu DIV um curto perfeitamente simples, com um estilo simples comporta BAD.
O que poderia causar tal comportamento errático? Bem! Francamente, não sei!

SOLUÇÃO POSSÍVEL:
Mais uma vez não me pergunte porquê, mas em muitos casos, esse problema tende a desaparecer quando você adicionar position: relative à mis comportando elementos de estilo, como este

. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px; position: relative}

Estranho, mas o que dizer? Deus Abençoe-me de IE!

E compartilham com EUA, SE VOCÊ teve problemas semelhantes.

sem comentários | tags: e e e | Postado em Quirks navegador e CSS e HTML

2008 20 de junho de 2008

Bug espaço em branco em Linha / Lista de Itens (LI) no IE6

Se você já fez (ou fazer um) um menu vertical usando itens da lista (li) tags e CSS, você pode encontrar, este ainda um outro bug no Internet Explorer, onde o IE 6 insere estas lacunas entre os itens de lista que contêm elementos nível de bloco, ou seja, se há qualquer espaço em branco entre os itens da lista na marcação. Obrigado, mas não, obrigado, a versão do IE 7 parece livre desse bug.
Se gosta de mim, e muitos mais, você pertence a esse grupo de desenvolvedores frustrados, que ainda têm para obter os seus novos layouts, trabalhando no IE6 também, então isso pode ser útil. Dê uma olhada ...

Marcação de exemplo:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> Sobre </ a> </ li>
<li> <a href="#"> Serviços </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Fale Conosco </ a> </ li>
</ Ul>

Você pode criar um pouco de CSS, semelhante a um abaixo, para transfrom a marcação acima em um menu vertical ....

Exemplo de CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Os resultados que você verá ...
nulo

A solução para este bug ... (modificado / adicionado CSS em negrito e itálico)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * este contém itens de lista flutuou * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Isso corrige o * /
width: 100%; / bug * espaço em branco no IE6 * /
}
# Menu a {
bloco; cor:: display # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Se a solução acima doesnot parecem funcionar (por razões conhecidas apenas para IE6) ... tentar este método em vez

Basta adicionar esta adicionais IE6 estilos únicos a sua marcação ...

<! - [If lt IE 7>
<style type="text/css">
# Menu li a {display: inline-block;}
# Menu li a {display: block;}
</ Style>
<[Endif] ->

sem comentários | tags: e e e e e | Postado em Quirks navegador , CSS

2008 12 de abril de 2008

CSS Cross Browser Corte Altura mínima

Publicar IE 6, MSIE tem sido gentil o suficiente para nós desenvolvedores de interface do usuário, adicionando algumas mais propriedades CSS padrão para a maioria dos outros navegadores padrão. Uma dessas propriedades úteis em "min-height". Propriedade bastante simples que não precisa de explicação prolixo. Quando um min-height para uma divisão for definido, ele sempre mantém essa altura conjunto quando o conteúdo que abriga ocupa menos do que pode segurar e importante (ao contrário da simples propriedade "height" baunilha) escalas ou seja CSS, se comporta como um cisão, "height" é definido como "auto" ...

Para alguns de nós desenvolvedores pobres, que ainda são necessários para código CSS, que também deve funcionar no IE6, un disponibilidade do "min-height", poderia ser um empecilho algum ... desespero Donot.

Felizmente, temos peculiaridades suficientes no IE, que nós usaríamos a vantagem fora e cortar nosso caminho até chegar ao nosso objetivo ... ou seja, fazer uma divisão DIVISÃO como se a sua min-height no IE6

Solução 1: Usar o Hack sublinhado [ ... Leia mais ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>

Solução 2: Usando o atributo CSS hack Selector

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>

O atributo CSS hack Selector aproveita do fato de os navegadores anteriores IE6 tha ignorou um seletor de atributos dos. Note-se a exigência de uma outra divisão recipiente com class = "Algumaclasse". Apenas o presense do atributo de classe para essa divisão, substitui a altura da cernelha é automático para Opera, Mozilla e MSIE7 e posterior. IE6, que não suporta seletores atributos dos, ignora-lo.

Ver Demonstração do hack min-height para IE6

sem comentários | tags: e e e e e | Postado em CSS

2008 15 de março de 2008

Irritantes caixas de seleção visíveis através das Divisões de pop-up

Em várias ocasiões, ao fazer layouts de páginas com divisões popup / lightboxes / dicas etc nos deparamos com situações em que alguns objetos de formulário Select passa a ser sob estas divisões POPUP, pelo projeto e mostra através de .... YUK!

Bem! você pode facilmente corrigir isso ajustando seus Z-INDEX valores adequadamente para FF e IE7. Mas Good Old (trocadilho intencional) IE6 não se comportar conforme o esperado .... O show BOX SELECT através de, mesmo depois de aplicar alguns drasticamente elevados Z-INDEX valores para a sua Divisão de PopUp ... Bummer!!

Não existem soluções para este problema, mas há, creio eu, mais de uma maneira que poucos a trabalhar em torno deste problema, mas estou aqui para dizer-lhe a solução mais simples que eu uso, que funciona bem para mim, na maior parte do casos ....

"Esconder o ROUGE caixa SELECT quando você mostra a POPUP"

Simplesmente em seu trecho de script onde você mostrar o seu pop-up, adicione um pedaço de script para definir a visibilidade da caixa de seleção para "Hidden"

document.getElementById ('my_select') style.visibilty = "hidden".;

E lembre-se de configurá-lo de volta no próximo da sua Divisão de PopUp

document.getElementById ('my_select') style.visibilty = "visível".;

onde "my_select" é o ID da caixa de irritação SELECIONAR

Espero que isso ajude ...

PS. Existem outras opções como ofcourse dinamicamente positionining um IFRAME (mesmo tamanho que você PopUp), sob a DIV Popup ... Isso funciona muito bem, mas com uma adição de cargas de elementos DOM, scripts e dor de cabeça. Eu tenho usado essa solução também, e Se você precisar de alguma ajuda com esta opção, deixe-me saber. Será um prazer ajudar!

sem comentários | tags: e e e e | Postado em Quirks navegador e CSS e HTML , JavasScript

2008 08 de janeiro de 2008

Comentários condicionais: Para o seu IEs Duex Only-Parte

Poucos meses antes vimos, como poderíamos incluir um pedaço de CSS que seria visível para o IE6 só ( Para sua IEs Apenas ). Há outras maneiras de conseguir isto também. Basta incluir um CSS separado, específico para o seu IE alvo. isso poderia ser conseguido com o que é chamado de comentários condicionais.

Comentários condicionais é uma maneira de detectar o tipo de navegador e versão. Detecção do navegador é realizada para assegurar que o conteúdo apresentado ao específica browser. Detecção do navegador pode ser feito usando diversas técnicas. Este método tem várias vantagens sobre os métodos anteriores, que incluiu mudança de estilo usando javascript. Para listar alguns importante, seria;

  • Scripting não é necessária
  • Cross-browser

Como fazemos isso?

Faça alguma coisa no IE 5 apenas
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Faça alguma coisa em todas as versões do IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Faça alguma coisa em todas as versões do IE mais recentes que o IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

Para mais vartiations condicionais, leia esta informação no MSDN:
Sobre o comentário condicional

sem comentários | tags: e e e | Postado em Quirks navegador e CSS e HTML , JavasScript

2007 8 de setembro de 2007

Para sua IEs Apenas

Se você tiver sido escrito CSS por enquanto, você teria que experimentar esses momentos em que você literalmente puxar seu cabelo quando seus layouts CSS parecia bem em todos os novos navegadores (browsers quero dizer mais tarde que o IE6), mas o IE 6 joga uma birra. Você lutar duro para ajustar o seu CSS, mas ele não funciona ... Bem! Tente esses cortes ...

1. Sublinhado Hack: -
Por definição, especificação CSS 2.1 permite sublinhado ("_") em identificadores CSS. Mas muitos navegadores ainda parecem ignorar qualquer identifica procedeu com um sublinhado, mas o IE. Este bug do IE / recurso torna-se assim uma maneira muito clara para definir propriedades CSS para IEs só. então lembre-se, uma propriedade CSS escrito com o sublinhado no início é visível para o Internet Explorer (todas as versões do IE, mas 7)

#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}

Ver demonstração deste sublinhado corte

Além disso, O hack min-height para IE6 usa o hack underscore, confira

2. Corte sustenido (#): -
Como o sublinhado hack, este é também é para IEs oly, com uma diferença boa, identificadores de propriedade precedido por # no início é visível para todas as versões do IE, IE7 incluído e é invisível para qualquer outro navegador padrão.

.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}

Este hack foi usado muito bem para demonstrar um navegador cruz alinhamento vertical solução, dê uma olhada neste artigo para encontrar o nosso mais

3. CSS para o IE6 só: -
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}

Esses hacks pareça o paraíso, quando nada mais funciona ... Se qualquer um desses hacks salva sua vida, um dia, não se esqueça de me tratar para um café :)

sem comentários | tags: e e e | Postado em Quirks navegador e CSS e JavasScript

2007 12 de julho de 2007

Evento mouseover numa divisão transparente no IE

Eu tive esse problema, onde, se você tivesse um evento mouseover em uma divisão (DIV) e que a divisão, por alguma boa razão tinha que ser transparente (como no meu caso, onde foi obrigado a exibir algumas marcas sobre uma imagem no mouseover de esta divisão transparente), o IE não conseguiu disparar o evento mouseover (Trabalhou bem no Firefox).

Tentei várias opções ... muitos dos quais era apenas uma tentativa desesperada de obter o evento para disparar no IE. Um dos mais sensíveis, que eu pensei que poderia trabalhar era para definir uma cor de fundo para a divisão e defina a opacidade para zero ... Bem! força de trabalho!

A solução final que parecia estar a trabalhar e não perturbar a funcionalidade que eu precisava era de colocar um um pixel repetido / imagem de fundo transparente em que a divisão

... Parvo! mas agora IE parece feliz.

sem comentários | tags: e e e | Postado em Quirks navegador

2007 11 de junho de 2007

Bug margem IE6 duplo em elementos flutuantes

Simples ... Para corrigir este problema de exibição uso: inline.

div {float:left;margin:40px;display:inline;}

Se você tem um elemento flutuado como uma div e colocar margin-right margin-left ou naquele elemento, o Internet Explorer 6.0 irá dobrar esse valor margem, bagunçar o layout html / css. Para corrigir isso basta adicionar display: inline; para o seu elemento flutuante.

sem comentários | tags: e e e e | Postado em Quirks navegador , CSS

NDK casa | Expressando IT | Palate Expressando | Penmenship Expressando | Awe Expressando | expressar-me