2011 07 de julio 2011

La cuestión de la CSS truco

Había leído esto en algún blog ... pensé que era bueno para catalogar este de ref futuro .... También podría ser una cuestión importante entrevista que le pidió un día ....

Escribir un fragmento de CSS que se muestre un párrafo en azul en los navegadores más antiguos, de color rojo en los nuevos navegadores, verde y negro en IE6 en IE7

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

no hay comentarios | tags: , | publicado en CSS

2008 10 de octubre 2008

NO Para IE Only - selectores CSS niños no funcionan en IE

CSS para navegadores no IE: No es ninguna novedad para los desarrolladores de CSS, selectores CSS niños como el ejemplo de abajo, no parece que funcione en IE.

por ejemplo div> {lapso de un poco de CSS}, eso significa que "cuando un elemento span es un niño (y no un nieto o bisnieto infantil, etc) de un elemento de división".

Sin embargo, hemos utilizado este contexto a nuestro favor. Históricamente, el selector de hijo se ha utilizado para ocultar los comandos CSS de IE. Simplemente mediante la colocación de html>body delante de cualquier IE CSS comando ignorarlo:

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

Esto funciona porque <body> siempre es un hijo de <html> - nunca puede, por supuesto, un nieto o bisnieto de <html> .

Ahora que el IE 7 comprende el selector de hijo, usted tiene que insertar una etiqueta de comentario vacío justo después del signo mayor que el IE 7, no volverá a entender este selector (quién sabe por qué?) Y por lo tanto se ignoran totalmente este comando CSS.:

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

Si no lo ha visto antes, tiene una lectura a través de la siguiente, así

no hay comentarios | tags: y , los , los | publicado en Caprichos del navegador , la CSS

2008 04 de octubre 2008

La desaparición de HTML / DIV elementos en Internet Explorer [IE]

Como de costumbre, uno de los muchos problemas extraños con Internet Explorer y esto hay filas en el TOP 10 de las peculiaridades de IE.

PLANTEAMIENTO DEL PROBLEMA (este era mi problema, puede ser que tenga malas conductas similares):
Tengo muchas DIV está en la página con la clase "sectionhead", que no es sino el título de una sección en la página. Así que he un poco de estilo con este aspecto

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

El div es una barra de color gris claro con un poco de texto en negro. ¿Qué pasa en el IE es algunos de estos encabezados de sección se muestran bien, pero algunos son invisibles, hasta que, de desplazarse por la página o haga clic en algo en la página, etc A veces se tienden a desaparecer cuando usted haga clic en la tecla 'Alt' cuando la página hacia abajo o desplazarse con la barra de desplazamiento. A veces parece que volverá a aparecer cuando se vuelva a cargar (F5) la página. Me corto un DIV muy simple con un poco de estilo sencillo y se comporta BAD.
¿Qué puede causar este tipo de comportamiento errático? Bueno! Francamente, ni idea!

POSIBLE SOLUCIÓN:
Una vez más no me preguntes por qué, pero en muchos casos, este problema tiende a desaparecer cuando se agrega la posición: en relación con el mal comportamiento estilo de los elementos, así

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

Extraño, pero ¿qué decir? Dios me bendiga por el IE!

Y Comparta con EE.UU., si tenían problemas similares.

no hay comentarios | tags: y , los , los | publicado en Caprichos del navegador , la CSS y HTML

2008 20 de junio 2008

Bug espacio en blanco en artículos de línea / Lista (li) en IE6

Si alguna vez has hecho (o hacer uno) un menú vertical con elementos de la lista (li) y las etiquetas de CSS, puede encontrarse con este otro error en Internet Explorer, IE 6, donde se inserta la brecha entre los elementos de la lista que contienen los elementos a nivel de bloque, es decir, si hay algún espacio en blanco entre los elementos de la lista en el marcado. Gracias, pero no, la versión de Internet Explorer 7 parece libre de este error.
Si como yo, y muchos más, usted pertenece a este grupo de desarrolladores frustrados, que aún tienen que conseguir sus nuevos diseños, que trabajan en IE6 también, entonces esto podría resultar útil. ¡Echa un vistazo ...

Ejemplo de marcado:

<ul id="menu">
<li> <a href="#"> Inicio </ a> </ li>
<li> <a href="#"> Acerca de </ a> </ li>
<li> <a href="#"> Servicios </ a> </ li>
<li> <a href="#"> cartera </ a> </ li>
<li> <a href="#"> Ayuda </ a> </ li>
<li> <a href="#"> Contacte con nosotros </ a> </ li>
</ Ul>

Usted puede crear un poco de CSS, similar a la de abajo, para transformar la margen anterior en un menú vertical ....

Muestra CSS ...
# Menu {
margin: 0; padding: 0; fondo: # FF9900;
list-style-type: none; ancho: 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;
}

Los resultados que usted verá ...
nulo

Solución para este error ... (modificado / añadido CSS en negrita y cursiva)

# Menu {
margin: 0; padding: 0; fondo: # FF9900; list-style-type: none; ancho: 150px;
float: left; / * esto contiene elementos flotantes de la lista * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Esto fija el * /
width: 100%; / * espacio en blanco bug en IE6 * /
}
# Menu {un
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Si la solución anterior doesnot parecen funcionar (por razones conocidas sólo IE6) ... probar este método en lugar

Sólo tiene que añadir estos otros estilos sólo IE6 de su margen de beneficio ...

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

no hay comentarios | tags: y , los , los , la y | publicado en Quirks navegador , CSS

2008 12 de abril 2008

CSS Browser Cruz Altura mínima Hack

Nota IE 6, MSIE ha sido lo suficientemente amable para los desarrolladores de la interfaz de usuario mediante la adición de un poco más de las propiedades CSS estándar para la mayoría de los otros navegadores estándar. Una de estas propiedades útiles en "min-height". La propiedad bastante sencillo que no necesita explicación largo aliento. Cuando un min-height de una división se establece, se conserva siempre que la altura de juego cuando el contenido que alberga ocupa menos de lo que puede sostener y esto es importante (a diferencia del plain vanilla "altura" de la propiedad) las escalas o, dicho de CSS, se comporta como un cuya división de "altura" está ajustado en "auto" ...

Para algunos de nosotros los desarrolladores de pobres, que todavía se requieren para el código CSS que también deben trabajar en IE6, sin disponibilidad de la "min-height", podría convertirse en un tapón de la demostración en algún momento ... la desesperación Donot.

Afortunadamente, tenemos bastantes peculiaridades de IE, que se utilizan en beneficio de salir y cortar el camino a través de llegar a nuestro objetivo ... es decir, hacer una división DIVISIÓN como si su min-height en IE6

Solución 1: Uso del Hack subrayado [ ... Leer más ]

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

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

Solución 2: Utilizar el atributo CSS Selector de Hack

.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>

El atributo CSS Selector de Hack se aprovecha del hecho de los navegadores IE6 antes del tha ignorado un atributo físico-selector. Tenga en cuenta el requisito de la otra división de contenedores con class = "SomeClass". Sólo el presense del atributo de clase de esta división, anula la altura del respaldo automático para Opera, Mozilla y MSIE7 y posteriores. IE6, que no es compatible con los selectores de atributo físico, lo ignora.

Ver demostración del truco min-height para IE6

no hay comentarios | tags: y , los , los , la y | publicado en CSS

2008 15 de marzo 2008

Irrita los cuadros de selección visibles a través de las divisiones de ventanas emergentes

En varias ocasiones, mientras que hace los diseños de página con las divisiones de popup / Cajas de Luz y consejos, etc nos encontramos con situaciones en las que algunos objetos de formulario SELECT pasa a ser en estas divisiones POPUP, por diseño y se muestra a través de .... ¡Puaj!

Bueno! fácilmente se podría solucionar este problema ajustando sus valores de índice z adecuadamente para FF y IE7. Sin embargo, Good Old (nunca mejor dicho) IE6 no se comporta según lo previsto .... El programa Select Box a través, incluso después de aplicar algunas drásticamente altos valores de índice z de su División ... PopUp Charlatán!!

No hay soluciones para este problema, pero están ahí, creo yo, más que una manera de trabajar unos pocos-en torno a este problema, pero estoy aquí para decirles que la solución más sencilla que yo uso, que funciona bien para mí, en la mayor parte de la los casos ....

"Ocultar la caja de ROUGE SELECT cuando se muestra la POPUP"

Simplemente, en el fragmento de secuencia de comandos donde usted muestra su emergente, agregar un trozo de secuencia de comandos para establecer la visibilidad de la caja de selección de "Oculto"

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

Y recuerde que retroceder en el cierre de la División de PopUp

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

donde "my_select" es el ID de la caja de la irritación SELECT

Espero que esto ayude ...

PS. Hay por supuesto, son otras opciones como dinámicamente positionining un IFRAME (mismo tamaño que usted PopUp) en el marco del DIV emergente ... Esto funciona muy bien también, pero con una adición de un montón de elementos DOM, scripts y dolor de cabeza. He utilizado esta solución también, y si usted necesita cualquier ayuda con esta opción, me deja saber. Estará encantado de ayudarle!

sin comentarios | tags: y , los , los , la | publicado en Caprichos del navegador , la CSS y HTML , JavasScript

2008 08 de enero 2008

Comentarios condicionales: Para su EI-Sólo la parte Duex

Unos meses antes vimos, la forma en que podría incluir un trozo de CSS que sería visible a IE6 sólo ( Para su IE sólo ). Hay otras formas de lograr esto. Sólo tiene que incluir una separada de CSS, específica para su IE de destino. esto se podría lograr con lo que se llama como los comentarios condicionales.

Comentarios condicionales es una manera de detectar el tipo de navegador y versión. La detección del navegador se realiza para asegurar que el contenido que se presenta a la específica del navegador. La detección del navegador se puede hacer uso de muchas técnicas diferentes. Este método tiene varias ventajas sobre los métodos anteriores, que incluyeron el cambio de estilo usando javascript. Para obtener una lista importante de unos pocos, sería;

  • Secuencias de comandos no es necesario
  • Cross-browser

¿Cómo hacemos esto?

¿Es algo en IE 5 sólo
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

¿Es algo en todas las versiones de IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

¿Es algo en todas las versiones de IE más recientes que 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ás vartiations condicionales, lea esta información en MSDN:
Acerca de comentario condicional

no hay comentarios | tags: y , los , los | Publicado en Rarezas del navegador , la CSS y HTML , JavasScript

2007 08 de septiembre 2007

Para su IE sólo

Si usted ha estado escribiendo CSS por un tiempo, usted tendría que experimentar esos momentos en los que, literalmente, tirar de su cabello cuando sus diseños CSS se veía bien en todos los nuevos navegadores (me refiero a los navegadores más tardar el IE6), pero el IE 6 tiene una rabieta. Usted luchar duro para ajustar el CSS, pero no funciona ... Bueno! Pruebe estos trucos ...

1. Destacar Hack: -
Por definición, la especificación de CSS 2.1 permite subrayado ("_") en los identificadores de CSS. Sin embargo, muchos navegadores aún parecen ignorar cualquier identifica procedió con un guión bajo, pero el IE. Este fallo de IE / función se convierte así en una forma muy clara para establecer las propiedades CSS de IE solamente. a fin de recordar, una propiedad CSS por escrito con el guión en el comienzo es visible para Internet Explorer (todas las versiones de IE, pero 7)

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

Ver demostración de este guión truco

Además, el hack min-height para IE6 utiliza el truco de subrayado, echa un vistazo a

2. Almohadilla (#) Hack: -
Al igual que el guión truco, éste es también es para IE Oly, con una buena diferencia, los identificadores de propiedad que empiezan con un # en el comienzo es visible para todas las versiones de IE, IE7 incluido y es invisible para cualquier navegador estándar de otro.

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

Este truco se ha usado muy bien para demostrar un navegador transversal vertical alinear solución, echar un vistazo a este artículo para averiguar más

3. CSS para IE6 sólo: -
#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*/
}

Estos hacks parece enviado del cielo, cuando nada más funciona ... Si alguno de estos trucos te salva la vida algún día, no se olvide de que me traten a un café :)

no hay comentarios | tags: y , los , los | Publicado en Rarezas del navegador , la CSS y JavasScript

2007 12 de julio 2007

Mouseover evento en una división transparente en IE

Tuve este problema en el que, si usted tuviera un evento mouseover en una división (DIV) y la división que, por alguna razón tuvo que ser transparentes (como en mi caso, en el que se requiere para mostrar algunas etiquetas sobre una imagen en mouseover de esta división transparente), IE no para activar el evento mouseover (funcionó bien en FireFox).

Probado varias opciones ... muchas de las cuales era más que un intento desesperado por lograr que el evento para disparar en el IE. Uno de los más sensibles, que pensé que podría funcionar era establecer un color de fondo a la división y establecer la opacidad a cero ... Bueno! dint trabajo!

La solución final que parecía funcionar y no molestar a la funcionalidad que necesita es poner un pixel repetido / imagen de fondo transparente en que la división

... Tonto! pero ahora el IE parece feliz.

no hay comentarios | tags: y , los , los | publicado en Quirks navegador

2007 11 de junio 2007

Error de IE6 margen de doble en elementos flotantes

Simple ... Para corregir este problema de uso de la pantalla: en línea.

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

Si usted tiene un elemento flotante como un div y se coloca margen derecha o margen izquierda de ese elemento, Internet Explorer 6.0 se duplicará el valor de margen, estropear el diseño de HTML / CSS. Para solucionar este problema sólo tiene que añadir display: inline; a su elemento flotante.

sin comentarios | tags: y , los , los , la | publicado en Quirks navegador , CSS

NDK en casa | Expresando IT | Boca Expresando | Penmenship Expresando | Awe Expresando | expresarme