2011 7 juliol 2011

La qüestió de la CSS truc

Havia llegit això en algun blog ... vaig pensar que era bo per catalogar aquest d'ref futur .... També podria ser una qüestió important entrevista que li va demanar un dia ....

Escriure un fragment de CSS que es mostri un paràgraf en blau en els navegadors més antics, de color vermell en els nous navegadors, verd i negre 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 hi ha comentaris | etiquetes: , | publicat a CSS

2008 10 octubre 2008

NO Per IE Only - selectors CSS nens no funcionen en IE

CSS per navegadors no IE: No és cap novetat per als desenvolupadors de CSS, selectors CSS nens com l'exemple de baix, no sembla que funcioni en IE.

per exemple div> {lapse d'una mica de CSS}, això significa que "quan un element span és un nen (i no un nét o besnét infantil, etc) d'un element de divisió".

No obstant això, hem utilitzat aquest context al nostre favor. Històricament, el selector de fill s'ha utilitzat per ocultar les ordres CSS de l'IE. Simplement mitjançant la col.locació de html>body davant de qualsevol IE CSS comanda ignorar-ho:

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

Això funciona perquè <body> sempre és un fill de <html> - mai hauríeu d', un nét o besnét de <html> .

Ara que l'IE 7 comprèn el selector de fill, vostè ha de inserir una etiqueta de comentari buit just després del signe més gran que l'IE 7, no tornarà a entendre aquest selector (qui sap per què?) I per tant s'ignoren totalment aquesta comanda CSS.:

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

Si no l'ha vist abans, té una lectura a través de la següent, així

no hi ha comentaris | etiquetes: i , els , els | publicat a Capritxos del navegador , la CSS

2008 4 octubre 2008

La desaparició de HTML / DIV elements a Internet Explorer [IE]

Com de costum, un dels molts problemes estranys amb Internet Explorer i això hi ha files al TOP 10 de les peculiaritats de l'IE.

PLANTEJAMENT DEL PROBLEMA (aquest era el meu problema, pot ser que tingui males conductes similars):
Tinc moltes DIV és a la pàgina amb la classe "sectionhead", que no és sinó el títol d'una secció a la pàgina. Així que he una mica d'estil amb aquest aspecte

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

El div és una barra de color gris clar amb una mica de text en negre. Què passa a l'IE és alguns d'aquests encapçalats de secció es mostren bé, però alguns són invisibles, fins que, de desplaçar-se per la pàgina o feu clic a alguna cosa a la pàgina, etc De vegades tendeixen a desaparèixer quan feu clic a la tecla 'Alt' quan la pàgina cap avall o desplaçar amb la barra de desplaçament. De vegades sembla que tornarà a aparèixer quan es torni a carregar (F5) la pàgina. Em curt un DIV molt simple amb una mica d'estil senzill i es comporta BAD.
Què pot causar aquest tipus de comportament erràtic? Bé! Francament, ni idea!

POSSIBLE SOLUCIÓ:
Un cop més no em preguntis per què, però en molts casos, aquest problema tendeix a desaparèixer quan s'agrega la posició: en relació amb el mal comportament estil dels elements, així

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

Estrany, però què dir? Déu em beneeixi per l'IE!

I Comparteixi amb els EUA, si tenien problemes similars.

no hi ha comentaris | etiquetes: i , els , els | publicat a Capritxos del navegador , la CSS i HTML

2008 20 juny 2008

Bug espai en blanc en articles de línia / Llista (li) en IE6

Si alguna vegada has fet (o fer un) un menú vertical amb elements de la llista (li) i les etiquetes de CSS, pot trobar-se amb aquest altre error a Internet Explorer, IE 6, on s'insereix la bretxa entre els elements de la llista que contenen els elements block-level, és a dir, si hi ha algun espai en blanc entre els elements de la llista en el marcatge. Gràcies, però no, la versió d'Internet Explorer 7 sembla lliure d'aquest error.
Si com jo, i molts més, vostè pertany a aquest grup de desenvolupadors frustrats, que encara han d'aconseguir els seus nous dissenys, que treballen en IE6 també, llavors això podria resultar útil. ¡Fes un cop d'ull ...

Exemple de marcat:

<ul id="menu">
<li> <a href="#"> Inici </ a> </ li>
<li> <a href="#"> Sobre </ a> </ li>
<li> <a href="#"> Serveis </ a> </ li>
<li> <a href="#"> cartera </ a> </ li>
<li> <a href="#"> Ajuda </ a> </ li>
<li> <a href="#"> Contacti amb nosaltres </ a> </ li>
</ Ul>

Vostè pot crear una mica de CSS, similar a la de baix, per transformar la marge anterior en un menú vertical ....

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

Els resultats que vostè veurà ...
nul

Solució per aquest error ... (modificat / afegit CSS en negreta i cursiva)

# Menu {
margin: 0; padding: 0; fons: # FF9900; list-style-type: none; ample: 150px;
float: left; / * això conté elements flotants de la llista * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Això fixa el * /
width: 100%; / * espai en blanc error en IE6 * /
}
# Menu {1
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Si la solució anterior doesnot sembla que funcionen (per raons conegudes només IE6) ... provar aquest mètode en lloc

Només ha d'afegir aquests altres estils només IE6 del seu marge de benefici ...

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

no hi ha comentaris | etiquetes: i , els , els , la i | publicat a Quirks navegador , CSS

2008 12 abril 2008

CSS Browser Creu Alçada mínima Hack

Nota IE 6, MSIE ha estat prou amable per als desenvolupadors de la interfície d'usuari mitjançant l'addició d'una mica més de les propietats CSS estàndard per a la majoria dels altres navegadors estàndard. Una d'aquestes propietats útils en "min-height". La propietat bastant senzill que no necessita explicació llarg alè. Quan un min-height d'una divisió s'estableix, es conserva sempre que l'altura de joc quan el contingut que alberga ocupa menys del que pot sostenir i això és important (a diferència del plain vanilla "altura" de la propietat) les escales o, dit d'CSS, es comporta com un la divisió de "altura" està ajustat a "auto" ...

Per a alguns de nosaltres els desenvolupadors de pobres, que encara es requereixen per al codi CSS que també han de treballar en IE6, sense disponibilitat de la "min-height", podria convertir-se en un tap de la demostració en algun moment ... la desesperació Donot.

Afortunadament, tenim prou peculiaritats de l'IE, que s'utilitzen en benefici de sortir i tallar el camí a través d'arribar al nostre objectiu ... és a dir, fer una divisió DIVISIÓ com si el seu min-height en IE6

Solució 1: Ús del Hack subratllat [ ... Llegir més ]

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

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

Solució 2: Utilitzar l'atribut 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>

L'atribut CSS Selector de Hack s'aprofita del fet dels navegadors IE6 abans del tha ignorat un atribut físic-selector. Tingueu en compte el requisit de l'altra divisió de contenidors amb class = "SomeClass". Només el presense l'atribut de classe d'aquesta divisió, anul · la la altura del suport automàtic per a Opera, Mozilla i MSIE7 i posteriors. IE6, que no és compatible amb els selectors d'atribut físic, l'ignora.

Veure demostració del truc min-height per IE6

no hi ha comentaris | etiquetes: i , els , els , la i | publicat a CSS

2008 15 març 2008

Irrita els quadres de selecció visibles a través de les divisions de finestres emergents

En diverses ocasions, mentre que fa els dissenys de pàgina amb les divisions de popup / Caixes de Llum i consells, etc ens trobem amb situacions en què alguns objectes de formulari SELECT passa a ser en aquestes divisions POPUP, per disseny i es mostra a través de .... Ecs!

Bé! fàcilment es podria fer això ajustant els seus valors d'índex z adequadament per FF i IE7. No obstant això, Good Old (mai millor dit) IE6 no es comporta segons el que preveu .... El programa Select Box a través, fins i tot després d'aplicar algunes dràsticament alts valors d'índex z de la seva Divisió ... PopUp Xerraire!!

No hi ha solucions per aquest problema, però hi són, crec jo, més que una manera de treballar uns pocs-al voltant d'aquest problema, però sóc aquí per dir-los que la solució més senzilla que jo faig servir, que funciona bé per a mi, en la major part de la els casos ....

"Amaga la caixa de ROUGE SELECT quan es mostra la POPUP"

Simplement, en el fragment de seqüència de comandaments un cop mostrada la emergent, afegir un tros de seqüència de comandaments per establir la visibilitat de la caixa de selecció de "Ocult"

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

I recordi que retrocedir en el tancament de la Divisió de PopUp

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

on "my_select" és la identificació de la caixa de la irritació SELECT

Espero que això ajudi ...

PS. Hi ha per descomptat, són altres opcions com dinàmicament positionining un IFRAME (mateixa grandària que vostè PopUp) en el marc del DIV emergent ... Això funciona molt bé també, però amb una addició d'un munt d'elements DOM, scripts i mal de cap. He utilitzat aquesta solució també, i si vostè necessita qualsevol ajuda amb aquesta opció, em deixa saber. Us ajudarà!

sense comentaris | etiquetes: i , els , els , la | publicat a Capritxos del navegador , la CSS i HTML , JavasScript

2008 8 gener 2008

Comentaris condicionals: Per a la seva EI-Només la part Duex

Uns mesos abans vam veure, la manera com podria incloure un tros de CSS que seria visible a IE6 només ( Per a la seva IE només ). Hi ha altres formes d'aconseguir això. Només ha d'incloure una separada de CSS, específica de la vostra IE de destinació. això es podria aconseguir amb el que es diu com els comentaris condicionals.

Comentaris condicionals és una manera de detectar el tipus de navegador i versió. La detecció del navegador es realitza per assegurar que el contingut que es presenta a l'específica del navegador. La detecció del navegador es pot fer ús de moltes tècniques diferents. Aquest mètode té diversos avantatges sobre els mètodes anteriors, que van incloure el canvi d'estil usant javascript. Per obtenir una llista important d'uns pocs, seria;

  • Seqüències de comandaments no cal
  • Cross-browser

Com fem això?

És alguna cosa IE 5 només
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

És alguna cosa en totes les versions de l'IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

És alguna cosa en totes les versions de l'IE del nou IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

Per a més vartiations condicionals, llegeixi aquesta informació en MSDN:
Sobre comentari condicional

no hi ha comentaris | etiquetes: i , els , els | Publicat a Rareses del navegador , la CSS i HTML , JavasScript

2007 8 setembre 2007

Per a la seva IE només

Si vostè ha estat escrivint CSS per un temps, vostè hauria d'experimentar aquests moments en què, literalment, tirar del seu cabell quan els seus dissenys CSS es veia bé en tots els nous navegadors (em refereixo als navegadors molt tard el IE6), però l'IE 6 té una rebequeria. Vostè lluitar dur per ajustar el CSS, però no funciona ... Bé! Proveu aquests trucs ...

1. Destacar Hack: -
Per definició, l'especificació de CSS 2.1 permet subratllat ("_") en els identificadors de CSS. No obstant això, molts navegadors encara semblen ignorar qualsevol identifica procedir amb un guió baix, però l'IE. Aquest error de l'IE / funció es converteix així en una forma molt clara per establir les propietats CSS de l'IE només. per tal de recordar, una propietat CSS per escrit amb el guió en el començament és visible per a Internet Explorer (totes les versions de l'IE, però 7)

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

Veure demostració d'aquest guió truc

A més, el hack min-height per IE6 utilitza el truc de subratllat, fes una ullada a

2. Coixinet (#) Hack: -
Igual que el guió truc, aquest és també és per IE Oly, amb una bona diferència, els identificadors de propietat que comencen amb un # al començament és visible per a totes les versions de l'IE, IE7 inclòs i és invisible per a qualsevol navegador estàndard d'un altre.

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

Aquest truc s'ha fet servir molt bé per demostrar un navegador transversal vertical alinear solució, fer una ullada a aquest article per esbrinar més

3. CSS per IE6 nomé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*/
}

Aquests hacks sembla enviat del cel, quan només funciona ... Si algun d'aquests trucs et salva la vida algun dia, no s'oblidi de que em tractin a un cafè :)

no hi ha comentaris | etiquetes: i , els , els | Publicat a Rareses del navegador , la CSS i JavasScript

2007 12 juliol 2007

Mouseover esdeveniment en una divisió transparent en IE

Vaig tenir aquest problema en què, si vostè tingués un esdeveniment mouseover en una divisió (DIV) i la divisió que, per alguna raó va haver de ser transparents (com en el meu cas, en el que es requereix per mostrar algunes etiquetes sobre una imatge en mouseover de aquesta divisió transparent), IE no per activar l'esdeveniment mouseover (va funcionar bé en FireFox).

Provat diverses opcions ... moltes de les quals era més que un intent desesperat per aconseguir que l'esdeveniment per a disparar en l'IE. Un dels més sensibles, que vaig pensar que podria funcionar era establir un color de fons a la divisió i establir l'opacitat a zero ... Bé! DINT treball!

La solució final que semblava funcionar i no molestar la funcionalitat que necessita és posar un píxel repetit / imatge de fons transparent en què la divisió

... Ximple! però ara l'IE sembla feliç.

no hi ha comentaris | etiquetes: i , els , els | publicat a Quirks navegador

2007 11 juny 2007

Error de IE6 marge de doble en elements flotants

Simple ... Per corregir aquest problema d'ús de la pantalla: en línia.

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

Si vostè té un element flotant com un div i es col · loca marge dret o marge esquerre d'aquest element, Internet Explorer 6.0 es duplicarà el valor de marge, espatllar el disseny d'HTML / CSS. Per solucionar aquest problema només ha d'afegir display: inline; al seu element flotant.

sense comentaris | etiquetes: i , els , els , la | publicat a Quirks navegador , CSS

NDK a casa | Expressant IT | Boca Expressant | Penmenship Expressant | Awe Expressant | expressar-me