Koşullu CSS ile yeni oldum. Sorum şu, çapraz tarayıcılarla ilgili sorunları çözmek için kullanmak doğru mu? ÖrneğinCSS ifadeleri ... doğru mu?
: Büyük olasılıkla bu kullanarak OP edilir:
#header
{
[if IE 7] width: 600px;
[if Webkit] width:300px;
}
Editörün notu http://www.conditional-css.com/
Kullanım koşullu fiili CSS dosyaları ifadeleri (ya da sınıflar) ama üzerinde html. Örneğin bu gibi
:
<!--[if lte IE 6]>
<link href="css/layoutIE6.css" rel="stylesheet" type="text/css" />
<![endif]-->
Bu HTML dosyası yazılır, değil CSS dosyası!
Gönderdiğiniz biçim aslında işe yaramıyor ve bahis oynamanın standart olmadığı için geçerli olmadığını düşünüyorum.
Beni aynı cevaba yenin! – Hacknightly
Teşekkürler ... jackJoe! Web'deki çözümünüzü gördüm ... Soru şu: bir CSS dosyası ile aynı şeyi nasıl yapabilirim ... ve her bir durum için farklı dosyalar ile değil – BorisD
@BorisD iyi bir standart yöntemine sahip olup olmamasına bağlıdır . Önerdiğim çözüm, standartlar dahilinde değilse, standart olmayan bir özellik istiyorsanız, "hack" yöntemine gidin, örneğin class özelliğine bir alt çizgi eklemek gibi: '_font: Arial' (en az IE6 ile çalışır) veya "star" hack (class özelliği için bir yıldız işareti ekleyin, IE7 ile çalışır. Bu yöntemin büyük bir CSS dosyasında giderilmesi çok zordur! – jackJoe
İfadelerinizin geçerliliğine gelince, jackJoe'in iyi bir cevabı var. Ancak, bu genellikle iyi bir uygulama değildir. Yerleşim düzenine gelince, tarayıcıya özel bir düzen sorunu yaşamanız için tarayıcıyı çaprazlayan ve tarayıcıyla uğraşmayan iyi bir düzen elde etmek daha iyi bir fikirdir. Bunun yerine, özellik-özel konular hakkında endişelenin. Bir IE6 sorununu düzeltemediğinizde ve hangi noktada tarayıcıya özel bir kod uygulamanız gerektiğine dair kesin zamanlar vardır, böylece kendinizi bir baş ağrısına yol açmazsınız.
Genel olarak, yine de, bu iyi bir fikir bile değil.
Yan Not: Neden Tim Berners-Lee isminde hala IE5'i desteklemeye çalışıyorsunuz?
O IE için bu tekniğin varyasyonlarını kullanıldığı yaygın hale geldi, bunu HTML5 Boilerplate tarafından popüler yapıldığını düşünüyoruz [kaynak belirtilmeli]:
<!--[if lt IE 7]> <html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us"> <!--<![endif]-->
Şimdi elemanları hedefleyebilir IE ana CSS'deki kesmek olmadan dosyalar şöyle: bana göre
.ie6 .header li {
/* some ie6 only styles here */
}
, bu ayrı stil kullanarak çok daha sürdürülebilir, ancak diğer tarayıcılarda IE sty okuma (ancak uygulanmaması) çok hafif gerileme uğrar les.
Webkit'le ilgili bir sorun yaşıyorsanız, büyük olasılıkla hata yapıyorsunuz. Kesinlikle değil, ama çok muhtemelen.
DÜZENLEME: Çoğu tarayıcı, yalnızca söz konusu tarayıcıya uygulanacak kuralları ayarlamanıza izin veren özel uzantılara izin verir. Örnek: Bu size herhangi CSS özelliği uygulayabilirsiniz anlamına gelmez
-moz-property {}
-webkit-property {}
-o-property {/* Opera */}
Not, kullanılabilir durumdaki görmek gerekir.
En referans çabuk bulabiliriz: http://reference.sitepoint.com/css/vendorspecific
SO Editörler, bu bağlantıyı değiştirmek için çekinmeyin Hayır, değil, Bu
deneyebilir miyim daha iyi bir referans
Gerçekten çok iyi bir çözüm, paylaşım için teşekkürler! – jackJoe
Bunun, HTML5Boilerplate kaynağından kopyalandığını/yapıştırıldığını, IE olmayan tarayıcıları hedeflemek için neden kullanıldığını bilmiyorum ... Sorgulama, tamamen ben değilim IE koşullu yorumların ins ve outs ile tanıdık. –
Her neyse, bu basit ve akıllı bir yöntemdir;) – jackJoe
varsa IE 7 için & 8:
width: 600px\9;
IE10 için:
Tüm tarayıcılar içinwidth:300px\0/;
:
width: 600px;
Ama her üç tarayıcılarda istersen ayrı IE, GC, FF sonra bu düşünün bu
width:300px; width: 600px\9; width:300px\0/;
gibi kullanabilirsiniz sen ne aradığını için!
Bu örneği nereden aldınız? –
http://www.conditional-css.com/advanced adresinden kontrol edebilirsiniz. –
@BalaR: İlginç! Bunu hiç duymamıştım. Soruya uygun cevapları çekmek için not edilmelidir. –