Bazı blog bu okumuştum ... gelecekte ref için bu katalog için güzel olduğunu düşündüm .... Ayrıca bir gün sordu edeceğini önemli bir mülakatta olabilir ....
IE7 IE6 ve siyah yeşil, yeni tarayıcılarda kırmızı eski tarayıcılarda da mavi bir paragraf, görüntüler CSS bir pasajı yaz
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Re-Bisiklet Buzzword ve Web Geliştirme hiçbir farklı anlamına gelir. Bu çaba açısından, enerji tasarrufu!
CSS yazma ve tasarımlar HTML yaratma yıl içinde, ben "Yeniden icat Wheel" olarak biz bunlara vadede ne zaman ve enerji tasarrufu peşinde, birkaç iyi uygulamaları takip etmiştir. Zaman ve tekrar tekrar, benim gelecekteki çalışmalarında KUTUSU DIŞI kullanacağı bazı standart yeniden kullanılabilir CSS, birkaç şablon oluşturmak gerektiğini, kendimi anlattım. Tamamen değil de ama bazı hedeflerine ulaşmak için başarmıştı.
Ileriye yılında, CSS Yeniden Kullanım, kendimi daha bizim için yaygın olarak mevcuttur ve bu denenmiş ve test edilmiş ve çok deneyimli geliştiriciler tarafından oluşturulan olarak bunları kullanmak için koymaya karar verdim birkaç CSS çerçeveler bir göz vardı. Daha da önemlisi "yeniden icat KAÇININ".
Gazilere ortak bilgi, ben kalem çalıştık rağmen bazı temel kavramları / en iyi uygulamalar / CSS RE-BİSİKLET mümkün kılmak için, bu çerçeveler oluştururken gitti düşünceleri. Bu sadece yaklaşık ve son zamanlarda CSS çoğunluğa bindik bazı CSS geliştiriciler yardımcı olacağını umuyoruz!
İsimlendirme kullanın
Bu CSS / HTML yeniden kullanılabilir yapımında en önemli faktör olmalıdır. Sayfa öğeleri tutarlı isimleri verilmesi veya çok az değişikliklerle sayfası bileşenlerine ve bunların stilleri yeniden kullanımını sağlar. Bu argüman doğrultusunda, bile HTML5, selefine göre önemli bir değişiklik değişikliği, bazı yapısal etiketler yani tanıtmaktır. <article>, <section>, <header>, <aside> ve <nav> [ HTML5 neler getirecek? ]. Hatta HTML 4 (veya daha düşük) ile, o consistanly Aşağıdaki basit örnekte olduğu gibi sayfanızın standart bölümleri adlandırmak için en iyisi ...
Unutmayın, proje üzerinde çoğu sayfaları, aynı çekirdek yapı elemanları sahip bitirmek. Bu ortak temel sayfa öğeleri tanımlamak ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Standart Stiller (CSS sıfırlar) Reset: Bir çerçeve kullanmak veya kendi yazmak ister CSS sıfırlar sağlamalıdır [ CSS sıfırlar nelerdir? ], onlar azaltmak veya bazen çeşitli tarayıcılar arasında meydana görsel tutarsızlıkları ortadan kaldırmak gibi. Basit bir deyişle CSS Sıfırlama Mekanizması böylece bu pozlar herhangi bir tarayıcı varsayılan değerleri geçersiz kılma, sıfır veya boş değerler HTML Element stilleri ayarlar. Bu herhangi bir User-Agent Varsayılanları bu unsurları void [özelliklerini ayarlamak için bir mazisi temiz sağlar CSS2.1 User Agent Style Sheet Varsayılanları ]. Tüm CSS çerçeveler sıfırlama mekanizması var. Eğer kendi CSS sıfırlar yazıyorsanız, dikkatli bir kelime bir anahtar özelliği sıfırlamak için unutmak için ne ise, bu hata ayıklamak çok zor olan çapraz tarayıcı sorunları, neden olabilir olmasıdır. Unutmayın, sıfırlama stilleri bir kopyasını saklayın ve oluşturduğunuz her yeni projenin içine bırakın.
gövde, div, dl, ol dt, dd, ul, li, h1, h2, h3, h4, h5, h6, öncesi, form, fieldset, input, select, textarea, p, blockquote, masa, th, td { border: 0px; margin: 0; padding: 0; }
Set Defaults (Baseline Stiller) Elements:
Eğer (sıfır veya null) bazı HTML Elements belirli niteliklerin varsayılan değerleri ayarladıktan sonra, Bu unsurların her örneği üzerinde bazı stilleri uygulamak için gereklidir. Bu varsayılan ayar tasarım göre değişebilir veya sizi takip en iyi uygulamalar doğrultusunda olabilir.
En CSS çerçeveler, her zaman varsayılan tarayıcı stillerini sıfırlama ek olarak, bazı yeni varsayılan tanıttı.
Bu varsayılan User-Agent Defaults (CSS Sıfırlama tarafından götürülen) yoksun olmak, bu tarayıcılar arasında tutarlı olacaktır.
Unutmayın, Temel stilleri gidiyoruz tasarım çapında kullanılacak stillerini ayarlamak için kullanılır. ör.
html {font-size: 77%; font-family: Arial, sans-serif;} güçlü, h1, h2, h3, h4, h5, h6 {font-weight: bold;}
Ortak HTML Bileşenleri ve Ortak Sınıflar için Özet Stilleri:
Gibi bileşenler projeler arasında tekrar tekrar kullanıldığı için birçok sayfadan oluşan, çoğu projesi formlar, uyarıları ve hataları, Özel up'ları, lightbox'lar vb gibi bazı sıralama için site içerisinde kullanılan yaygın HTML öğeleri olacak, bir sağlamak için faydalı olacaktır bu bileşenler için önceden tanımlanmış stillerle ilişkili sınıflar seti ve kendinizi çok zaman kaydedebilirsiniz.
Dışında yaygın HTML bileşenleri için yeniden kullanılabilir stilleri tanımları tanımlayarak, biz soyut tarzlarda sınıflar tipografi, renk, hatta düzeni ile ilgili olabilir. Kendimi kullanmak eğilimindedir ... Clearfix, Font08, FontGrey, AlignL, DisplayB vb gibi ortak dersleri
form girdi {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; height: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;} şeklinde textarea {border: 0px; background: # ffffff; color: # 000000; font-size: .9 em; line-height: 1,5 em; taşması: görünür;} . Fbold {font-weight: bold; color: # cccccc;} . Fgrey {color: # 666666;} . Flightgrey {color: # bbbbbb;} . {Clear: both;} clearfix . Bölücü {border-top: 1px solid # 647B06; border-bottom: # 9CC00A 1px solid; height: 0px;} . Displayb {display: block;}. Displayn {display: none;} . Alignr {text-align: sağ}. Alignc {text-align: center} . Floatr {float: right;}. Floatl {float: left;}
Ortak tarayıcı tuhaflıklar için Düzeltmeler
Çeşitli tarayıcılar CSS kodunu uygulamak ve CSS özellikleri için destek değişen düzeyde sağlamak. Bunun sonucu .... Biz geliştiriciler mücadele bırakılması gerektiğini "Tarayıcı olağandışı". Özellikle, IE6 karşılamak için bir son tarih ile en CSS kodlayıcıları ziyaret ediyor. İyi haber deneyimi bu konuları (Sıklıkla olarak adlandırılan birlikte mümkün REUSABLE düzeltmeleri getirdi olan CSS Hacks ).
Unutmayın, bu Hacks / düzeltmeleri el altında tutun
/ * Aşağıdaki zoom: 1 kuralı IE6 + IE7 içindir. * / * Html. Clearfix, *:. First-child + html clearfix { zoom: 1; }
Sizin CSS Rafineri tutun
Nihayet. Size ilham ve CSS çerçeveler bir veya daha fazla kullanmak niyetinde iseniz, Heres birkaç popüler olanları hızlı listesi ....
CSS çerçeveler kullanarak kendinize ait bir tane oluşturmak için tembel olduğu anlamına gelmez ... Bu size, başkalarının tecrübe ve hatalardan ders TIME ve VERİMLİLİK ARTIŞI SAVE akıllı olduğunu ima ediyor, unutmayın!
CSS bu yıl 10 yıl varlığını tamamlandı! CSS kullanarak kendi ekmek (veya değil) kazanç, bir süredir edenler, o zaman biz yazı iyi bir seçim için açlıktan edilmiştir nasıl farkında olabilir. Hatta yazı eksikliği ile de bu gibi tasarımcıların CSS Zen Garden kendi tasarımları bazı adalet yapmanın peşinde fontları değiştirmek için CSS arka plan görüntülerinin kullanımı yaptık. Ayrıca Flash / JavaScript ® kesmek tasarım hedeflerine ulaşmak için çalıştık. Hiçbir şekilde bu bizim web tasarımları içine arzu yazı almak için yanlış bir yoldur, ama kesinlikle, bu en çok arzu edilen bir yol değildir. ve yıllar içinde web tasarımcısı, benim gibi, tamamen kendi tasarımları için on kadar yazı yararlanmıştır.
Web standartları ve yazı biçimleri son gelişmeleri aynı eski varsayılan yazı tipleri dışında yazı HTML metni oluşturmak mümkün kılar. "@ Font yüzü" CSS izleyen zamanlarda geliyor.
@ Font yüzü gerçek yazı dosyaya bağlantı ve web onu almak için bir çözüm provids. @ Font yüzü kullanarak, tasarımcılar arka plan görüntüleri gibi metin dondurmak zorunda kalmadan yazı tiplerini kullanabilirsiniz. Uygulanması, çok yalındır aşağıda gösterildiği gibi değil, bütün iyi şeyleri ona bir CON parçası olduğu gibi, TÜM tarayıcılar tek bir "yazı türü" destekler. Eğer çapraz tarayıcı desteği gerektiren sitesinde @ font yüzü kullanmayı planlıyorsanız, o zaman aynı çeşitli yazı türleri kaynaklardan sağlamak zorunda olacak.
@ Font yüzü kullanma
@ Font-face { font-family: 'CalligraphyFLFRegular'; src: url ('CalligraphyFLF.eot'); src: local ('CalligraphyFLF'), yerel ('CalligraphyFLF'), url ('CalligraphyFLF.woff') formatında ('ATKI'), url ('CalligraphyFLF.ttf') formatında ('truetype'), url ('CalligraphyFLF . svg # CalligraphyFLF ') formatında (' svg '); } @ Font-face { font-family: "Senin yazı"; src: url ("yazı / font_filename.eot"); src: local ("Alternatif isim"), yerel ("Alternatename"), url ("yazı / font_filename.woff") formatında ("ATKI"), url ("yazı / font_filename.otf") formatında ("açıştürü"), url ("yazı / # font_filename font_filename.svg") formatında ("svg"); } h2 {font-family: "Senin yazı", Gürcistan, serif;}
Eğer, yukarıdaki örnekte görebilirsiniz seçilen yazı yazı dahil olarak, bir aynı yazı için fonttypes bir dizi bağlamak için vardır. Bu nedenle insanlar "Yazı Takımı" olarak bakın.
Açıkça Son Kullanıcı Lisans Anlaşması (EULA) altında için CSS @ font-face özelliği ile bağlantı sağlayan edinilebilir Yazı Kitleri vardır.
Faydalı yazıtipinin Kaynaklar:
Zaman ve tekrar tekrar, zaman davranmaya görülen tüm diğer tarayıcılar gibi w3c kuralları, bir sinir krizi atarak gelişim ruhu IE spiraller dışarı tarafından anlatılan, bir düzeltme var gibi görünmüyor. Sadece böyle bir IE7 bu konudur.
Problem Durumu:
Ben ve benzeri diğer ciddi web geliştiricileri birçok bazı bağlantılar (çapa etiketler) üzerinden vurgulu üzerinde düzeni içinde yüzen, orada iç içe pek çok kez, daha fazla fark etmiş olabilirsiniz, içeren konteyner sağa bir kaç piksel kaydırmak gibi görünüyor . Ben bu sorun için google çözümler denedi, ama neredeyse neden herhangi bir makul cevabı bulduk ve oluştuğunda (oluyor bu sorunu önlemek için yardımcı olacağı), dolayısıyla ben de soruna net bir çözüm bulmadım ...
Olası Çözüm:
Deneyim Out, ben bu konuda yanlış davranmaya konteyner CSS tanımında bir zum özelliğini ekleyerek sabit olduğu, yani kez bildirimi% 90 oranında var ...
# Somediv { zoom: 1; }
tekrar nedenleri belirsizdir ... Bu deneyin ...
IE bazı elemanları varsayılan olarak "gerçek" bir "hasLayout" özelliği var. Birçok görsel CSS davranışları, örneğin, bir alfa filtresi sadece o hasLayout bir öğe üzerinde çalışır. ve {Zoom: 1} hedef elemanları hasLayout özelliği vermek gibi görünüyor .... Faydalı? Dont olan ben öyle düşünüyorum ...
Zum özelliği de Chrome tarafından desteklenen görünüyor, ancak kullanımı kuvvetiyle benim düzeni üzerinde çok olumsuz etkisi gibi görünüyor ... sizin için çalışıyor, bu deneyin ... eğer bu olmuyorsa, "CSS craps" altında bu sayfayı işaretleyin
Dün Google Chrome CSS sıfırlar karşılaşılan sorunu sonra ... Ben User Agent Style Sheets alanında biraz derinlemesine kazma düşündüm ...
CSS2.1 User Agent Style Sheets ... (ne "User Agent Style Sheets" habersiz olanlar takip etmek için varsayılan değerler üzerinde bu tablo Bulundu User Agent Style Sheets (Özellikler) nedir .
CSS 2.1 User Agent Style Sheets varsayılan tam bir listesi için buraya tıklayın
Dün, her "Ground Hog Günü" gibi bazı CSS / tablosuz düzenleri üzerinde çalışıyordu. Tüm IE 7, FF 3 ve Chrome iyi gidiyordu, untill aniden, bazı un-yoksayılabilir marjları yalnızca Google Chrome görülen gördüm. Çok garip ve worring rağmen, Ben yüceltilmesidir geldiğini bazı yeni hata / sorun oldu, benim sıradan çalışma bazı baharat nihayet vardı. Sad (ama güzel) bu sonda birkaç dakika içinde düzeltildi ...
Google Chrome, benim CSS sıfırlar (: 0px margin) ihmal gibi Temelde gibiydi. Aslında stil kullanıcı arayüzüne (-webkit-dolgu-start: 40px) neden oldu. 0 hatalı elemanları: Peki çözüm dolgu ayarlayarak bu tarz sıfırlamak oldu.
Herhangi bir elemanı oluyor bu sorunu önlemek için iyi bir yolu aşağıdaki gibi küresel bir CSS istirahat kullanmaktır
* {Margin: 0; padding: 0;}
User Agent Style Sheets (Özellikler) nedir?
Aşağıdaki alıntı alınır http://meiert.com/en/blog/20070922/user-agent-style-sheets/ User Agent Style Sheets hakkında daha fazla okumak, takip bağlantı
Ama belki sıradan - - CSS şekilde her biri 1 User Agent (UA, çoğunlukla bir 'web tarayıcısı' veya 'web istemci') makul belgeleri sunan bir varsayılan stil sayfasına sahip olacağını belirterek fikrini getirir. CSS 2 ki uyumlu kullanıcı arayüzleri varsayılan bir stil sayfası uygulamak gerekir (ya da yapsaydım gibi davranan) ve bir kullanıcı arayüzünün öntanımlı biçembent belge dili için genel sunum beklentilerini karşılayacak şekilde belge dilinin unsurlarını gerektiğini söylüyor; CSS 3 aynı düşüncede olması muhtemeldir.
CSS özellikleri bir "gerçek" tarzı varsayılan görüntü için levha veya kullanılıp kullanılmayacağını uygulamaları için o kadar bırakın bu yana, her tarayıcının yükleme klasöründe varsayılan stil sayfasını bulamazsanız bu şaşırtıcı değil. Microsoft Internet Explorer'ın yanı sıra Opera farklı olarak, örneğin (ve bildiğim kadarıyla), Firefox ve Netscape Navigator ("html.css" arayın) değil, aynı zamanda Konqueror gibi Gecko tarayıcı varsayılan stil kavramak oldukça basit olun.
Başka çabuk tut. Burada basit ve CSS GÜÇ kullanarak güzel bir şey ... ama başlamak zor kavrayabilme (ve kesinlikle ben değildim) idi. Dropshadow ekleme, Photoshop ANF Fireworks vb düzenleme araçları gibi bazı görüntü kullanarak, bir çoğumuz için kek bir peice olabilir
Ben CSS kullanarak gölge için tercih nedeni genellikle bir uygulama bir sayfa tasarımı / html oluştururken, gereksinimleri yineleme tutmak olmasıdır. Ben freinds listesinde veya bir resim galerisi gösteren olanlar gibi birçok görüntü ile var olan bir web sitesi olarak, ne demek, bunun için, işleyemeyiz zaten eklemek veya gölgeleri kaldırmak için boş olmuştu görüntüleri tüm yükünü zor olacak olsun.
Bu ekstra bölümler veya eklemek için htmls oluştururken biraz ileri görüşlü yapmış Eğer öyleyse, genellikle durum XSL, PHP bu simgeleri / küçük üreten bir döngü Mantık olması. JAVA veya başka herhangi bir programlama / betik dili, istediğiniz zaman ekleyebilirsiniz, sonra sadece gösteri ve sürekli değişen müşteri gereksinimleri uyarınca, CSS Display özelliğini kullanarak bu gölgeler gizleme meselesi ... Ben ileri düşünerek bu tür yapılan havn't Bu daha önce ... ama ahev şimdi başladı!
Aşağıdaki örnekte, orijinal resim gölge serbesttir ve dropshadows gerektiği gibi uygulanır! AYRICA, ben hakkında benim önceki Tut hileler (Well! bu muhtemelen Rehberler kısa çeşitli vardır, bu yüzden sadece onlara "Tut" çağırıyor haklıdır) kullanarak, biraz fazladan gitti CSS Klip özelliğini kullanarak göstermek için sadece
Neden bunu anlamak istiyorum?? Humm ...!
CSS yazarların çoğu o CSS Klip özellik muhtemelen en un kullanılan CSS özelliklerini biri olduğu konusunda hemfikirdir. O da benim için çok doğruydu ve ben değiştirerek başlayana kadar, ihmal en mutlu oldu MooTools İKİ Tokmak (Pin) Slider Bileşeni (Range Gösterge ile) .
Kaydırıcıyı aralığı belirtmek için kırpılır backgroud görüntüleri (değişken genişlik bölünmeye karşı) kullanarak Slider bileşeni değiştirmek için bileşeni kullanıcıların birinden iyi bir öneri vardı. Böylece eğlenceli ama CSS Klip mülk suları (benim için tabii) un imtiyaz girmek için benim zamanım geldi.
Eh! ne kadar zor olabilir? Hiç benzemiyor ... EVET ve HAYIR. CSS Clip özelliği kullanmak için sözdizimi oldukça dik ama anlamı / usuage biraz croocked olduğunu. Benimki gibi bir hafıza ile, her şey benim Slider Senaryo üzerinde rework oturup ... kendimi benim komut oluşturduğunuz mantığı hatırlatmak için, bu CLIP özelliğinin kullanımını atıfta tokeep var .... Bu nedenle! gelecekte (ve ayrıca görünüyor olanların yararına CSS Klip Property tarafından boggled) hatırlamak için bir umut ile, kalem aşağı düşünülmektedir
CSS Klip ne yapar?
Klip CSS 2.1 görsel efektlerin modülü kısmıdır. Basitçe söylemek gerekirse, işini bu nedenle ek dosyaları (zaten Slider Bileşeni daha iyi kullanmak için bu özelliği koyduk oluşturmak zorunda kalmadan görüntüleri kırpma ve küçük oluşturmak, kırpılan bir nesnenin üzerine görünür bir pencere yerleştirmektir 
)
CSS Klip özelliğini kullanarak, rect şeklini kullanarak bir kırpma oluşturabilirsiniz. Rect kullanarak diğer birçok CSS Özellikleri (margin, padding vb) gibi gerektirir dört koordinatları Üst, Sağ, Alt, Sol (TRBL). Bu dört koordinatları (a bir süre atmak içine beyin gönderir) kullanarak, klip kırpma bölge nasıl hesapladığını bir yakından bakmak bu özelliğin croocked doğasını yansıtır. Şimdi şaşırtmak için alttan üstten başlar ve sağ sol başlar. . Sen bu söylediklerini bakın? .... Bu yüzden bu yazı ...
Bu küçük karmaşa kolaylıkla aşağıda CSS Klip / rect özelliği bu görsel açıklama ile yok olabilir!
Biz başladık görevi (ve ayrıca geniş açılı görüntü) bir squarer görünen bir görüntü içine aşağıdaki Küçük resim derlemek için
| |  |
| Orijinal Thumbnal / Resim | Sqaure Thumbmail için Klip Gereksinimleri |
Biz bir tablo hücresinde bazı içerik hizalayarak, bizim sayfa düzenleri oluşturmak için CSS ile uğraşmak zorunda kaldı önce, sadece çocuk oyuncağı gibiydi. Basitçe "align" veya seçtiğiniz hizalama, çocuk oyuncağı olması tablonun "valign" özelliğini ayarlayın!
Biz elemanları için özellik "vertical-align" sahip olsa css ile, bu "align" veya "valign" özellikleri gibi basit olması görünmüyor. Daha specifiic olmak "vertical-align" çapraz tarayıcı CSS parçası yazmak, özellikle de sizin sorunları çözmek için herhangi bir gibi görünüyor.
HTML Tabloları kullanımı olmadan, nesne üzerinde merkezleme ve SORUN, herhangi bir görüntü veya içeren bölümü içinde bazı metin, belki bir noktada her UI / CSS geliştiricileri kabusu olmuştur olacaktır. Bu sorun daha da ortalanmış olarak nesne doğada dinamik olursa, yüksekliği değişken olduğunda, yani uyumlaştırmak üzüntülerin extrapolates (bilinmeyen yükseklik).
Biz uğraşmak zorunda tarayıcılarının aralığında çalışacak bilinen hiçbir yalındır çözüm olsa da, ben yapar varmak için denedim çözüm (IE6, IE 7 ben bunu denedim birkaç tarayıcılarda çalışır gibi görünüyor , FF).
ÇÖZÜM:
Mozilla, Opera ve Safari gibi tarayıcılarda garip özelliği basitçe "table-cell" (display: table-cell) için içeren bölünme "ekran" özelliğini ayarlayarak, onun duyular getirilebilir "vertical-align" davranıyor .
Sorun hala, ama onlar, onlar sadece bunu görmezden gibi "table-cell" mülkiyet ve cahil ile ne anlamak için kim görünmüyor, tarayıcı IE ailesi ile kalır. Şeyler yapmak için HTML basit, reklamlar birkaç DOM öğeleri olsa da, aşağıda verilen çözüm.
CSS ve HTML bu gibi görünüyor
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> kez <br/>: 3456 </ div>
</ Div>
</ Div>
Sonuç şöyle: -
Burada demo görüntülemek | İndir Kaynak Dosyaları (448 kez indirildi)
TOP CSS Hizala
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> kez <br/>: 1234 </ div>
</ Div>
</ Div>
Sonuç şöyle: -
ALT CSS Hizala
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> kez <br/>: 1234 </ div>
</ Div>
</ Div>
Sonuç şöyle: -
Burada demo görüntülemek | buradan indirin
Bu uyum sorunu için makul bir çözüm bulmaya çalışan bu yana, yaşları gibi görünüyor. Ama şimdi bu çözüm ile, ben biraz huzur hissediyorum.
Bu gün bir umut
Burada yukarıdaki çözüm CSS ve HTML indirin (448 kez indirildi) .. anlaşılabilirliği için, CSS optimize edilmiş değil
PS: Bu arada, bu benim tıklandığında bazı resimlerin küçük olan ...
Sigara IE tarayıcılar için CSS: Onun hiçbir aşağıdaki örnekte olduğu gibi CSS Çocuk Seçiciler, IE çalışmak için görünmüyor, CSS geliştiriciler için haber.
örneğin div demektir> p {bazı css}, "bir yayılma elemanı bir bölünme elemanının bir çocuğu (ve DEĞİL torunu veya torununun çocuğu vb) olduğu zaman".
Ama bizim avantaj için bu CON kullanılır. Tarihsel olarak, çocuk seçici IE CSS komutlarını gizlemek için kullanılmıştır. Basitçe koyarak html>body herhangi bir CSS komut IE önünde bunu göz ardı eder:
html>body .foo { CSS commands go here ;}
Bu çalışıyor çünkü <body> her zaman bir çocuk <html> - tabii ki bir torunu ya da torun çocuğu olamaz <html> .
Şimdi IE 7 çocuk seçici anladığını, sen işareti daha büyük sonra doğrudan boş bir yorum etiketi eklemek zorunda IE 7 sonra bu seçici (neden kim bilir?) Anlamak değildir ve bu nedenle tamamen bu CSS komutu yok sayacaktır.:
html> /**/ body .foo { CSS commands go here ;}
Zaten bu daha önce görmediyseniz, yanında aşağıdaki üzerinden bir okuma var
