7 sorunları doğru kaydır

SORU

30 Kasım 2009, PAZARTESİ

7 sorunları doğru kaydır

=^ Html .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
</head>
<body>
  <div style='border: 1px solid red; width: 100px;'>
    <a href="#">foo</a>
    <a href="#"style="border-color: blue; float: right;">bar</a>                
  </div>
something
</body>
</html>

7 (IE6 desteği gerekli değildir) ile sorunlarım var

IE 7 üzerinde işlenmiş html=^ bu gibi görünüyor .
alt text

Bu (şu anda ıe8/chrome üzerinde çalışıyor) gibi görünmek istiyorum=>
alt text

Ben değiştirmek gerekir? :)

CEVAP

30 Kasım 2009, PAZARTESİ

Her iki element kaydır ve temizlemeniz gerekir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#" style="float:left;">foo</a>            
    <div style="clear:both;"></div>
  </div>
something
</body>
</html>

Ya da sadece böyle normal elemanın önünde kayan eleman

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#">foo</a>            
  </div>
something
</body>
</html>

Kısa Açıklama:

Pardon İngilizce ve benim çizim, ama burada yüzer ve takas çapraz tarayıcı nasıl çalışır kısaca

Bir öğeyi sola veya sağa doğru süzülüyor. Kayan eleman, eleman "" içerik aşağıya doğru. normal basmaz Neden bakın

Şamandıra ve net:

alt text Efsane: Turuncu/Doğru aksın, Mavi/Sola Kaydır, Gri Çizgiler/Açık bölücü, Kırmızı Rect/sınırları

Bu durumda, bir metin satırı 2 element - bir şamandıra kaldı, diğeri sağa kaydır. Kayan, içeriğini aşağıya aka yer alarak değil itecektir. Bu nedenle gri çizgiler clear:both kullanırsanız, içeriği aşağıda 2 yüzen öğeleri arasında yukarı yığını ve ne istediğinizi olmayabilir böylece.

Bu yüzen aşağıda clear:both kullandığınızda, yüzer aşağıda İçerik olarak çok unsuru en yüksek yükseklik, hangisi olarak ertelenecek. Bu diyagramı 2. ve 3. bölümde gösterilmiştir.

Şamandıra sadece:

alt text Efsane: Turuncu/Doğru aksın, Mavi/sonraki, Kırmızı Dörtgen ile divded satır/Normal içerik, Gri Çizgileri/sınırları

Mavi normal içerik zaten varsayılan olarak text-align: left;. Böylece odaklı bırakılır. Şamandıra tarayıcı bu hattan yüzer söylüyorsun çünkü normal içerik önünde olmak gerekir.

Farklı koşullar etkisini görmek için deney: ön dalgalanır, arkasına, sağa sola kaydır, hem açık, sağ açık ve sol düşünen.

Bunu Paylaş: