2011 7 Ιούλη 2011

Το ζήτημα της CSS σιδηροπρίονο

Αν διαβάζετε αυτό σε κάποιο blog ... Νόμιζα ότι ήταν ωραίο να τα καταχωρήσει για μελλοντική ref .... Επίσης, θα μπορούσε να είναι ένα σημαντικό ζήτημα συνέντευξή σου ότι θα ζητήσει κάποια ημέρα ....

Γράψτε ένα απόσπασμα του CSS που θα εμφανίσει μια παράγραφο σε μπλε χρώμα σε παλαιότερα προγράμματα περιήγησης, κόκκινο σε νεότερα προγράμματα περιήγησης, σε πράσινο και μαύρο IE6 σε IE7

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


2008 10 Οκτ. του 2008

Για ΔΕΝ IE μόνο - CSS Selectors παιδιών δεν λειτουργούν στον IE

CSS για μη-IE browsers: καμία είδηση ​​της στο CSS προγραμματιστές που, CSS Selectors παιδιών, όπως το παρακάτω παράδειγμα, δεν φαίνεται να εργαστούν στον IE.

π.χ. div> διάστημα {} κάποια css, αυτό σημαίνει ότι "όταν ένα στοιχείο άνοιγμα είναι ένα παιδί (και όχι ένα εγγόνι ή μεγάλο μεγάλο παιδί κλπ) ενός στοιχείου διαίρεση".

Αλλά συνηθίζαμε CON αυτό προς όφελός μας. Ιστορικά, ο επιλογέας παιδί έχει χρησιμοποιηθεί για να κρύψει CSS εντολές από IE. Απλά με την τοποθέτηση html>body μπροστά από κάθε εντολή CSS IE θα την αγνοήσουμε:

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

Αυτό λειτουργεί, επειδή <body> είναι πάντα ένα παιδί του <html> - δεν μπορεί ποτέ να είναι φυσικά ένα εγγόνι ή μεγάλος-εγγονός του <html> .

Τώρα που IE 7 αντιλαμβάνεται τον επιλογέα παιδί, θα πρέπει να εισάγετε ένα κενό ετικέτα στο σχόλιο αμέσως μετά τη μεγαλύτερη από ό, τι σημάδι IE 7 δεν θα καταλάβουν τότε αυτό επιλογέα (ποιος ξέρει γιατί?) Και ως εκ τούτου θα αγνοήσει εντελώς την εντολή CSS.:

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

Αν δεν το έχετε ήδη δει αυτά πριν, έχουν διαβάσει μέσω των ακόλουθων καθώς και


2008 4 Οκτ. του 2008

Εξαφάνιση HTML / DIV στοιχεία του Internet Explorer [IE]

Ως συνήθως, ένα από τα πολλά παράξενα ορισμένα προβλήματα με IE και αυτό πρέπει να κατατάσσεται στο top 10 του IE ιδιοτροπίες.

ΔΗΛΩΣΗ ΤΟΥ ΠΡΟΒΛΗΜΑΤΟΣ (Αυτό ήταν το πρόβλημά μου, ίσως έχετε παρόμοια misbehaviors):
Έχω πολλές DIV Είναι στη σελίδα με την κατηγορία "sectionhead", η οποία δεν είναι τίποτα, αλλά ο τίτλος του τμήματος της σελίδας. Έτσι έχω κάποια στυλ μοιάζει με αυτό

. Sectionhead {font-size: 18px? Υπόβαθρο: # cfcfcf? Padding: 5px?}

Το div είναι ένα ελαφρύ γκρι μπάρα με κάποιο μαύρο κείμενο. Τι συμβαίνει στον IE είναι μερικές από αυτές τις κεφαλίδες εμφανίζονται εντάξει, αλλά μερικά είναι αόρατα, έως ότου, μετακινήστε τη σελίδα ή κάντε κλικ κάτι στη σελίδα, κλπ. Κάποια στιγμή τείνουν να εξαφανίζονται όταν κάνετε κλικ στο 'alt' πλήκτρο, όταν σας σελίδα προς τα κάτω ή να μετακινηθείτε με τη γραμμή κύλισης. Μερικές φορές φαίνεται να επανεμφανιστούν όταν φορτώσετε (F5) της σελίδας. Έχω μια τέλεια μικρή απλή DIV με κάποιο απλό ύφος συμπεριφέρεται άσχημα.
Τι θα μπορούσε να προκαλέσει μια τέτοια αλλοπρόσαλλη συμπεριφορά; Καλά! Ειλικρινά, Δεν έχω ιδέα!

Πιθανή λύση:
Και πάλι μην με ρωτάτε γιατί, αλλά σε πολλές περιπτώσεις το πρόβλημα αυτό τείνει να εξαφανιστεί όταν προσθέτετε θέση: σε σχέση με την κακή συμπεριφορά στοιχεία στυλ, όπως αυτό

. Sectionhead {font-size: 18px? Υπόβαθρο: # cfcfcf? Padding: 5px? Θέση: σχετική}

Περίεργο, αλλά τι να πω; Ο Θεός ευλογεί μου από IE!

ΚΑΙ ΜΕ αναλάβουν το μερίδιο των ΗΠΑ, αν είχατε παρόμοια προβλήματα.


2008 20 Ιούνη 2008

Λευκό Bug Διάστημα στη Γραμμή / Κατάλογος Είδη (Li) στον IE6

Αν έχετε κάνει ποτέ (ή κάνοντας ένα) ένα κάθετο μενού χρησιμοποιώντας στοιχεία της λίστας (LI) ετικέτες και CSS, μπορείτε να αντιμετωπίσετε, αυτό ακόμη σφάλμα στον Internet Explorer, όπου IE 6 εισάγει αυτά τα κενά μεταξύ των στοιχείων λίστας που περιέχει στοιχεία επιπέδου μπλοκ, δηλαδή αν υπάρχει κενό μεταξύ των στοιχείων λίστας στη σήμανση. Ευχαριστώ, αλλά δεν χάρη, η έκδοση του IE 7 φαίνεται απαλλαγμένο από αυτό το bug.
Αν, όπως εγώ, και πολλά άλλα, ανήκετε σε αυτή την μπάντα του απογοητευμένοι προγραμματιστές, οι οποίοι εξακολουθούν να πρέπει να πάρετε νέες διατάξεις τους, που εργάζονται στον IE6 πάρα πολύ, τότε αυτό θα μπορούσε να αποδειχθεί χρήσιμη. Ρίξτε μια ματιά ...

Δείγμα σήμανσης:

<ul id="menu">
<li> <a href="#"> Αρχική </ a> </ li>
<li> <a href="#"> Σχετικά </ a> </ li>
<li> <a href="#"> Υπηρεσίες </ a> </ li>
<li> <a href="#"> χαρτοφυλάκιο </ a> </ li>
<li> <a href="#"> Συχνές Ερωτήσεις </ a> </ li>
<li> <a href="#"> Επικοινωνία </ a> </ li>
</ Ul>

Μπορείτε να δημιουργήσετε κάποια CSS, παρόμοιο με το παρακάτω, για να transfrom την παραπάνω σήμανση σε ένα κάθετο μενού ....

Δείγμα CSS ...
# {Μενού
margin: 0? padding: 0? υπόβαθρο: # FF9900?
κατάλογος-style-type: κανένας? πλάτος: 150px?
}
# Li μενού {margin: 0? Padding: 0?}
# Ένα μενού {display: block?
χρώμα: # 555555?
text-decoration: κανένας?
padding: 0 15px?
γραμμή-ύψος: 2,5? σύνορα-κάτω: 1px solid # FFF?
}

Τα αποτελέσματα θα δείτε ...
μηδέν

Λύση για αυτό το σφάλμα ... (τροποποίηση / προσθήκη CSS με έντονους πλάγιους χαρακτήρες)

# {Μενού
margin: 0? padding: 0? υπόβαθρο: # FF9900? λίστα-style-type: κανένας? πλάτος: 150px?
float: αριστερά? / * αυτό περιέχει επέπλευσε στοιχεία λίστας * /
}
# Li μενού {
margin: 0? padding: 0?
float: αριστερά? / * Αυτό καθορίζει το * /
πλάτος: 100%? / * κενό bug στον IE6 * /
}
# Ένα μενού {
display: block? χρώμα: # 555555?
text-decoration: κανένας?
padding: 0 15px?
γραμμή-ύψος: 2,5? σύνορα-κάτω: 1px solid # FFF?
}

Εάν η παραπάνω λύση doesnot φαίνεται να λειτουργεί (για λόγους που είναι γνωστοί μόνο στον IE6) ... δοκιμάστε τη μέθοδο αυτή, αντί

Απλά προσθέστε αυτό το πρόσθετο IE6 μόνο στο στυλ σας σήμανσης ...

<-! [Αν lt IE 7>
<style type="text/css">
# Li ένα μενού {display: inline-block?}
# Li ένα μενού {display: block?}
</ Span>
<[Endif] ->


2008 12 Απρ 2008

CSS Browser Σταυρού Ελάχιστο Ύψος Hack

Δημοσίευση IE 6, MSIE έχει την καλοσύνη να μας UI ανάπτυξης με την προσθήκη μερικών περισσότερες ιδιότητες CSS πρότυπο για πιο άλλο πρότυπο browsers. Μια τέτοια χρήσιμα ιδιοκτησίας "min-height». Αρκετά απλή ιδιοκτησία που δεν χρειάζεται μακρύ winded εξήγηση. Όταν ένα λεπτό-το ύψος για ένα τμήμα έχει οριστεί, διατηρεί πάντα ότι το ύψος σετ, όταν το περιεχόμενο που φιλοξενεί καταλαμβάνει λιγότερο από ό, τι μπορεί να χωρέσει και το σημαντικότερο (σε αντίθεση με την plain vanilla "ύψος" ιδιοκτησίας) ή κλίμακες σε CSS λόγια, συμπεριφέρεται σαν ένα τμήμα του οποίου "ύψος" έχει οριστεί σε "αυτόματη" ...

Για μερικούς από εμάς κακή προγραμματιστές, οι οποίοι εξακολουθούν να είναι υποχρεωμένοι να κώδικα CSS που πρέπει επίσης να εργαστεί στον IE6, un-διαθεσιμότητα του «min-height", θα μπορούσε να αποδειχθεί ένα πώμα δείχνουν ... κάποτε donot απελπισία.

Ευτυχώς, έχουμε αρκετά παραξενιές του IE, η οποία θα χρησιμοποιεί προς όφελός της και να χαράξει το δρόμο μας μέσα από την επίτευξη του στόχου μας ... δηλαδή κάνει μια διαίρεση ΔΙΕΥΘΥΝΣΗ σαν του min-height στον IE6

Λύση 1: Χρήση του επισημαίνουν την αμυχή [ ... Διαβάστε περισσότερα ]

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

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


Λύση 2: Χρησιμοποιώντας την Ιδιότητα CSS Επιλογέας 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>

Η ιδιότητα CSS Επιλογέας Hack εκμεταλλεύεται το γεγονός ότι τα προγράμματα περιήγησης νωρίτερα tha IE6 αγνοείται ένα atribute-επιλογέα. Σημειώστε την απαίτηση ενός άλλου τμήματος δοχείο με class = "someclass". Ακριβώς ενώ η παρουσία του χαρακτηριστικού κατηγορίας για αυτό το τμήμα, υπερισχύει το ύψος πίσω αυτοκινήτων για Opera, Mozilla και MSIE7 και αργότερα. IE6, η οποία δεν υποστηρίζει επιλογείς atribute, αγνοεί.

Προβολή Demo του hack-min ύψος για τον IE6



2008 15 Μάρτη 2008

Ερεθίζει Επιλέξτε Κουτιά ορατά μέσω των Διευθύνσεων Popup

Σε αρκετές περιπτώσεις, ενώ κάνει σελιδοποίηση με popup τμήματα / φανάρια / Συμβουλές κ.λ.π. συναντάμε περιπτώσεις όπου κάποια μορφή SELECT αντικείμενα συμβαίνει να είναι κάτω από αυτές τις POPUP τμήματα, από το σχεδιασμό και δείχνει μέσα από .... YUK!

Καλά! θα μπορούσε να διορθωθεί εύκολα με την προσαρμογή αυτή z-index αξίες σας κατάλληλα για FF και IE7. Αλλά Παλιές Καλές (λογοπαίγνιο προορισμένο) IE6 δεν συμπεριφέρεται ως στόχο .... Το SELECT δείχνουν BOX μέσω, ακόμα και μετά την εφαρμογή ορισμένων δραστικά το μεγάλο z-index αξίες PopUp τμήματός σας ... Κρίμα!

Υπάρχουν ΟΧΙ Διορθώσεις για αυτό το πρόβλημα, αλλά υπάρχουν, πιστεύω, περισσότερο από λίγα τρόπο να εργαστεί, γύρω από αυτό το πρόβλημα, αλλά Im εδώ για να σας πω την απλούστερη λύση που μπορώ να χρησιμοποιήσω, το οποίο δουλεύει μια χαρά για μένα, στις περισσότερες των περιπτώσεις ....

"Κρύβουν το ROUGE SELECT πλαίσιο, όταν ΔΕΙΞΤΕ ΤΗΝ POPUP"

Απλά στο απόσπασμα σενάριό σας, όπου σας δείξει αναδυόμενο σας, προσθέστε ένα κομμάτι του σεναρίου για να ορίσετε την ορατότητα των ΣτοΕπιλογή να "Κρυφό"

document.getElementById («my_select») style.visibilty = "κρυφό".?

Και θυμηθείτε να το γυρίσουν πίσω στο Κλείσιμο των PopUp τμήματός σας

. document.getElementById («my_select») style.visibilty = "ορατή"?

όπου "my_select" είναι το ID του ερεθισμού SELECT Πλαίσιο

Η ελπίδα αυτό βοηθά ...

PS. Υπάρχουν φυσικά και άλλες επιλογές όπως τα δυναμικά positionining ένα IFRAME (ίδιο μέγεθος όπως pop-up) στο πλαίσιο του Popup DIV ... Αυτό λειτουργεί πολύ καλά, αλλά με την προσθήκη φορτίων του DOM στοιχεία, σενάρια και κεφαλαλγία. Έχω χρησιμοποιήσει αυτή τη λύση πάρα πολύ, και Εάν χρειάζεστε οποιαδήποτε βοήθεια με αυτήν την επιλογή, μην επιτρέψτε μου να ξέρω. Θα χαρούμε να σας εξυπηρετήσουμε!


2008 8 Ιαν 2008

Προϋπόθεση Σχόλια: Για ΑΠ έχει μόνο-Μέρος Duex σας

Λίγους μήνες νωρίτερα είδαμε, πώς θα μπορούσε να περιλαμβάνει ένα κομμάτι του CSS που θα είναι ορατή μόνο στον IE6 ( Για σας Μόνο η ΑΠ ). Υπάρχουν και άλλοι τρόποι για να επιτευχθεί αυτό, όπως καλά. Απλά περιλαμβάνει ένα ξεχωριστό CSS, ειδικά σε IE στόχο σας. αυτό θα μπορούσε να επιτευχθεί με αυτό που ονομάζεται ως υπό όρους σχόλια.

Σχόλια υπό όρους είναι ένας τρόπος για να ανιχνεύσει τον τύπο προγράμματος περιήγησης και την έκδοση. Ανίχνευσης Browser γίνεται για να εξασφαλιστεί ότι το περιεχόμενο που παρουσιάζεται στο συγκεκριμένο πρόγραμμα περιήγησης. Ανίχνευσης Browser μπορεί να γίνει χρησιμοποιώντας πολλές διαφορετικές τεχνικές. Η μέθοδος αυτή έχει πολλά πλεονεκτήματα σε σχέση με παλαιότερες μεθόδους, που περιλάμβανε αλλαγή στυλ χρησιμοποιώντας JavaScript. Για να καταγραφούν σημαντικές λίγα, θα ήταν?

  • Προγραμματίζοντας δεν απαιτείται
  • Cross-browser

Πώς να το κάνουμε αυτό;

Κάντε κάτι στον IE 5 μόνο
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Κάνετε κάτι σε οποιαδήποτε μορφή π.χ. εκδόσεις
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Κάνετε κάτι σε οποιαδήποτε μορφή π.χ. νεότερες εκδόσεις ότι IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

Για περισσότερες όρους vartiations, διαβάστε αυτές τις πληροφορίες στο MSDN:
Σχετικά με όρους Σχόλιο


2007 8 Σεπτέμβρη, 2007

Για σας η ΑΠ Μόνο

Εάν έχετε γράψει CSS για λίγο, θα έχουν εμπειρία από εκείνους τους χρόνους όταν τραβάτε τα μαλλιά σας κυριολεκτικά όταν CSS σχεδιαγράμματα σας φαινόταν πρόστιμο σε όλα τα νέα προγράμματα περιήγησης (browsers εννοώ αργότερο IE6), αλλά IE 6 ρίχνει ένα ξέσπασμα. Θα αγωνιστούμε σκληρά για να ρυθμίσετε CSS σας, αλλά δεν δουλεύει ... Καλά! Δοκιμάστε αυτά τα hacks ...

1. Υπογραμμίζουν Hack: -
Εξ ορισμού, CSS 2,1 προδιαγραφή επιτρέπει υπογράμμισης ("_") στο CSS αναγνωριστικά. Αλλά πολλοί περιηγητές, φαίνεται ότι εξακολουθούν να αγνοούν οποιαδήποτε προσδιορίζει προχώρησε με μια κάτω παύλα, αλλά IE. Σφάλμα / χαρακτηριστικό αυτού του IE γίνεται έτσι ένα πολύ σαφή τρόπο για να ρυθμίσετε τις ιδιότητες CSS για ΑΠ έχει μόνο. ώστε να θυμάστε, μια ιδιότητα CSS με την γραπτή υπογραμμίζουν την αρχή είναι ορατή για τον Internet Explorer (όλες οι εκδόσεις, αλλά IE 7)

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

Προβολή της επίδειξης αυτό υπογραμμίζουν σιδηροπρίονο

Επίσης, το ύψος λεπτά-hack για τον IE6 χρησιμοποιεί το υπογραμμίζουν αμυχή, ελέγξτε έξω


2. Hash (#) Hack: -
Όπως υπογραμμίζουν η αμυχή, αυτό είναι πάρα πολύ είναι η ΑΠ για oly, με μια καλή διαφορά, αναγνωριστικά ιδιοκτησία προηγήθηκε με # στην αρχή είναι ορατή για όλες τις εκδόσεις IE, IE7 συμπεριλαμβάνεται και είναι αόρατο για οποιονδήποτε άλλο browser.

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

Αυτό το hack έχει χρησιμοποιηθεί ωραία να αποδείξει ένα σταυρό πρόγραμμα περιήγησης κάθετη ευθυγράμμιση λύση, ρίξτε μια ματιά σε αυτό το άρθρο μπορείτε να βρείτε περισσότερες μας


3. CSS για IE6 μόνο: -
#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*/
}

Αυτές οι αμυχές φαίνεται ουρανό έστειλε, όταν τίποτα άλλο δεν λειτουργεί ... Αν κάποια από αυτές τις αμυχές σώζει τη ζωή σας κάποια μέρα, μην ξεχάσετε να μου φέρονται σε καφέ :)


2007 12 Ιουλίου του 2007

Mouseover γεγονός σε μια διαφανή κατανομή στον IE

Είχα αυτό το πρόβλημα, όπου, αν είχατε ένα mouseover γεγονός σε ένα τμήμα (DIV) και τη διαίρεση αυτή, για κάποιο καλό λόγο θα έπρεπε να είναι διαφανείς (όπως στην περίπτωσή μου, όπου απαιτείται για την προβολή κάποιων ετικέτες πάνω από μια εικόνα του mouseover Αυτό το διαφανές τμήμα), δηλ. δεν κατόρθωσαν να προκαλέσουν την εκδήλωση mouseover (ελειτούργησε το πρόστιμο στο FireFox).

Προσπάθησα πολλές επιλογές ... πολλά από τα οποία ήταν απλώς μια απεγνωσμένη προσπάθεια να πάρει την εκδήλωση πυρκαγιάς σε IE. Μία από τις λογικές αυτές, που σκέφτηκα ότι θα μπορούσε να λειτουργήσει ήταν να ορίσετε ένα χρώμα φόντου για το τμήμα και ορίστε την αδιαφάνεια στο μηδέν ... Καλά! βαθούλωμα δουλειά!

Η τελική λύση που έδειχνε να δουλεύει και να μην διαταράσσουν την λειτουργικότητα που απαιτείται ήταν να θέσει ένα εικονοστοιχείο επαναληφθεί / διαφανή εικόνα φόντου σε αυτό το τμήμα

Silly ...! αλλά τώρα IE φαίνεται ευτυχής.


2007 11 Ιουνίου 2007

IE6 διπλό σφάλμα στο περιθώριο επέπλευσε στοιχεία

Απλή ... Για να διορθώσετε αυτό το πρόβλημα χρήση οθόνης: ενσωματωμένο.

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

Εάν έχετε μια επέπλευσε στοιχείο, όπως ένα div και να τοποθετήσετε το περιθώριο δεξιά ή αριστερά το περιθώριο για αυτό το στοιχείο, Internet Explorer 6.0 θα διπλασιάσει την τιμή του περιθωρίου κέρδους, χαλούν την HTML / CSS διάταξης. Για να το διορθώσετε αυτό, απλώς απεικόνιση: inline? Να κυμαινόμενο στοιχείο σας.


NDK σπίτι | Εκφράζοντας IT | Εκφράζοντας Ουρανίσκος | Εκφράζοντας Penmenship | Εκφράζοντας δέος | εκφράζομαι