Expresa-la

Se está a ver esta páxina no IE8, entón ten que estar a ver un fondo opaco branco cheo detrás deste post. Onte, o meu compañeiro apuntou que para min (Como eu son unha desas persoas que se adapten aos cambios lentamente e de forma constante ... especialmente navegadores. Podería dicirse, eu son un covarde, pero que así sexa .... Sendo un desenvolvedor da interface de usuario, eu estou sempre merda por medo a novas versións do navegador ... sabe o que Im tlaking, non?)

Cavado en torno a tempo, intentando atopar unha solución para resolve-lo e entón o que ...
Nesta ocasión, o noso navegador ALL TIME preferido fixo todo de novo, soltando todo o apoio para a opacidade CSS. O non estándar `filter: alpha (Opacity = # #)` atributo CSS foi eliminada, Niza, pero tamén totalmente esqueza engadir soporte CSS3 opacidade (como a forma na que todos os navegador o outro está moi ben manter-la). Entón, por primeira vez desde que Deus nos falou sobre CSS opacidade (desde IE 5.0, creo), un navegador web non soporta CSS opacidade.
E agora para a crema encima: a palabra oficial do equipo IE 8? É "por deseño" e "imos considerar isto nunha futura versión de IE".

PS: Proba esta páxina no FF, xuro que parece puro!

Se xa fixo (ou facer un) un menú vertical usando os elementos dunha lista (li) etiquetas e CSS, podes atopar, este aínda outro erro en Internet Explorer, onde o IE 6 inserir estas lagoas entre os elementos de lista que conteñen elementos nivel de bloque, é dicir, se hai calquera espazo en branco entre os elementos da lista na reserva. Grazas, pero non, grazas, a versión de IE 7 parece libre dese erro.
Se lle gusta de min, e moitos máis, vostede pertence a ese grupo de desenvolvedores frustrados, que aínda teñen para obter os seus novos esquemas, traballando no IE6 tamén, entón iso pode ser útil. Bótalle un ollo ...

Marcado de exemplo:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> Sobre </ a> </ li>
<li> <a href="#"> Servizos </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Contacte connosco </ a> </ li>
</ Ul>

Pode crear un pouco de CSS, semellante a un abaixo, para transfrom a reserva por riba nun menú vertical ....

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

Os resultados que ver ...

A solución a este erro ... (modificado / engadido CSS en negra e cursiva)

# Menú {
Margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * este contén elementos de lista flutuou * /
}
# Menú li {
Margin: 0; padding: 0;
float: left; / * Isto resolve o * /
width: 100%; / bug * espazos en branco ao IE6 * /
}
# Menú a {
bloque; cor :: display # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; Modelo-bottom: 1px solid # FFF;
}

Se a solución anterior doesnot parecen funcionar (por razóns coñecidas só para IE6) ... probar este método en vez

Tan só engadir este adicionais IE6 estilos únicos a súa cita ...

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

En varias ocasións, ao facer esquemas de páxinas con divisións emerxente / lightboxes / consellos etc nos atopamos con situacións nas que algúns obxectos de formulario Select pasa a ser baixo estas divisións emerxente, polo proxecto e mostra a través de .... Yuk!

Ben! pode facilmente corrixir isto axustando os seus Z-index valores axeitadamente para FF e IE7. Pero Good Old (xogo de palabras intencionado) IE6 non comportarse conforme o esperado .... O show BOX SELECT a través de, mesmo despois de aplicar algúns drasticamente altos Z-index valores para a súa División de xanelas emerxentes ... Bummer!

Non existen solucións a este problema, pero hai, creo eu, máis dun xeito que poucos a traballar en torno a este problema, pero estou aquí para dicir-lle a solución máis simple que eu uso, que funciona ben para min, na maior parte do casos ....

"Ocultar o Rouge caixa SELECT cando amosa a Emerxente"

Simplemente no seu tramo de guión onde amosar o seu pop-up, engade unha peza de script para definir a visibilidade da caixa de verificación para "hidden"

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

E lembre de configurar-lo de volta o próximo da súa División de xanelas emerxentes

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

onde "my_select" é o ID do cadro de irritación seleccionar

Espero que isto axude ...

PS. Existen outras opcións como ofcourse dinámica positionining un IFRAME (mesmo tamaño que emerxente), baixo a DIV Emerxente ... Isto funciona moi ben, pero con un engadido de carga de elementos DOM, scripts e dor de cabeza. Eu teño usado esa solución tamén, e se precisa de axuda con esta opción, deixe-me saber. Será un pracer axudar!

Poucos meses antes vimos, como poderiamos incluír unha peza de CSS que sería visible para o IE6 só ( Para a súa IES Só ). Hai outras formas de conseguir isto tamén. Só ten que incluír un CSS separado, específico para o seu IE obxectivo. isto podería ser conseguir co que se denomina comentarios condicionais.

Comentarios condicionais é un xeito de detectar o tipo de navegador e versión. Detección do navegador se realiza para garantir que o contido presentado ao específica navegador. Detección do navegador pode ser feito empregando diversas técnicas. Este método ten varias vantaxes sobre os métodos anteriores, que incluíu cambio de estilo usando javascript. Para listar algúns importante, sería;

• Script non é necesaria
• Cross-browser

Como facemos iso?

Fai algo no IE 5 só
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Fai algo en todas as versións de IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Fai algo en todas as versións de IE máis 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 máis vartiations condicionais, lea esta información no MSDN:
Sobre o comentario condicional

Xa reparou, ás veces, cousas simples como só se rexeita a traballar no IE6 ... location.href é só unha cousa desas.

Se engadiu unha función onclick á súa marca de referencia como a continuación ...

<a href="javascript:void(0);" onclick="onClickLink('xxx');"> ir a nova situación </ a>

Con algunha función como esta ...
función onclickLink (id) {
var URI = "test2.html id =?" + id;
window.location.href = URI;
}

Para a súa ironía, vai notar que tal unha peza de script simple se rexeita a traballar no IE ... Ben! Podo discutir as razóns aquí, pero non creo que vai valer a pena ... Aínda que eu non parecen ter unha solución ... (eu aposto que se entender Javascript, vai entender, por que engadir este tweak para o IE6)

A solución

<a href="javascript:void(0);" onclick="onClickLink('xxx'); retorno false; "> ir a nova situación </ a>

Se algunha respostas simples, fai escribir un comentario. Realmente vai ser appretiated, eu aposto que, por moitos!

Se ten sido escrito CSS polo de agora, que tería que probar eses momentos nos que literalmente tirar o seu cabelo cando os seus esquemas CSS parecía ben en todos os novos navegadores (navegadores quero dicir máis tarde que o IE6), pero o IE 6 xoga unha birra. Vostede loitar duro para axustar o seu CSS, pero non funciona ... Ben! Probe estes cortes ...

1. Subliñado Hack: -
Por definición, especificación CSS 2.1 permite subliñado ("_") en identificadores CSS. Pero moitos navegadores aínda parecen ignorar calquera identifica procedeuse cun subliñado, pero o IE. Este erro do IE / recurso tórnase así unha forma moi clara para definir propiedades CSS para IES só. entón lembre, unha propiedade CSS escrito co subliñado no inicio é visible para Internet Explorer (todas as versións de IE, pero 7)

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

Ver demostración deste subliñado corte

Ademais, o hack min-height para IE6 usa o hack guión baixo, confía

2. Corte sostido (#): -
Como o subliñado hack, este é tamén é IES oly, cunha diferenza boa, identificadores de propiedade precedido por # a principios é visible para todas as versións do IE, IE7 incluído e é invisible para calquera outro navegador por defecto.

.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 moi ben para demostrar un navegador cruz liña vertical solución, bótalle un ollo neste artigo para atopar o noso máis

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*/
}

Estes hacks pareza o paraíso, cando nada máis funciona ... Se calquera destes hacks salva a súa vida, un día, non se esqueza de me tratar a un café :)

Eu tiven ese problema, onde, se tivese un evento mouseover nunha división (DIV) e que a división, por algunha boa razón tiña que ser transparente (como no meu caso, onde foi obrigado a exhibir algunhas marcas sobre unha imaxe no mouseover de esta división transparente), o IE non pode disparar o evento mouseover (Traballou ben no Firefox).

Tente varias opcións ... dos que era só unha tentativa desesperada de obter o evento para disparar no IE. Un dos máis sensibles, que eu penso que podería traballar era para definir unha cor de fondo para a división e define a opacidade a cero ... Ben! forza de traballo!

A solución final que parecía estar a traballar e non perturbar a funcionalidade que eu precisaba era de poñer un un pixel repetido / imaxe de fondo transparente en que a división

... Parvo! pero agora IE parece feliz.

Simple ... Para corrixir este problema de visualización uso: liña.

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

Se vostede ten un elemento flutuado como unha span e poñer Margin-right Margin-left ou aquel elemento, Internet Explorer 6.0 pode dobrar este valor marxe, desorde a disposición html / css. Para solucionar isto basta engadir Mostrar: liña, para o seu elemento flotante.