2011-05-11 10 views
6

Sunucu tarafında oluşturulan sağ hizalama hücreleri içeren bir tablom var. Hücredeki her satır isteğe bağlıdır, bu nedenle sunucu tarafında bir if-then ifadesine eklenir.Google Chrome'daki ekstra beyaz alanı sağa hizalı bir tablo satırında nasıl yok sayılır?

Örnek html, Google Chrome'da ilk sütunun hatalı olduğu 3 sütunu gösterir. Sütunlar 2 & 3 doğru, ancak garip, çünkü html aynıdır, yeni satırlar ve boşluklar hariç.

Google Chrome’da ilk sütuna baktığımızda, doğru marjın, hücre içindeki her satır için% 100 hizalanmadığını fark edeceksiniz.

Bu sorunlar Firefox veya IE'de, yalnızca Google Chrome'da mevcut değil.

<!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> 
     <table border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #000000;"> 
      <tbody> 
       <tr> 
        <td style="text-align: right;border: 1px solid #000000;"> 
         <span>Not Ok in Google Chrome</span> 
         <br /><span id="C1">500.000,00 €</span> 
         <br /><span id="C2">166.666,67 €</span> 
         <br /><span id="C3">489.545,90 €</span> 
        </td> 
        <td style="text-align: right;border: 1px solid #000000;"> 
         <span>Ok in Google Chrome</span><br /> 
         <span id="D1">500.000,00 €</span><br /> 
         <span id="D2">166.666,67 €</span><br /> 
         <span id="D3">489.545,90 €</span> 
        </td>    
        <td style="text-align: right;border: 1px solid #000000;"> 
         <span>Ok in Google Chrome</span><br /><span id="D1">500.000,00 €</span><br /><span id="D2">166.666,67 €</span><br /><span id="D3">489.545,90 €</span> 
        </td>      
       </tr> 
      </tbody> 
     </table> 
    </body> 
    </html> 

Html'yi farklı bir şekilde oluşturmak bir seçenek değildir.

Bu çalışmayı Google Chrome'da nasıl yapabilirim, html'yi değiştirerek değil, ancak ekstra bir stil veya bir şey ayarlayarak nasıl yapabilirim?

cevap

3

Sadece HTML'yi değiştirin.

Ne kadar zor olabilir? Neden onu değiştiremiyorsun?

Bu HTML değiştirmeden çalışır, ancak biraz aptalca:

td span { 
    display: block 
} 
td br { 
    display: none 
} 

Orijinal kod: my Düzeltme sayesindehttp://jsbin.com/ipaca5
:http://jsbin.com/ipaca5/2

+1

Tek. BR'den önce bir vagon dönüşünün önemli bir boşluk olarak kabul edildiği ve bu nedenle bir edebi alan olarak dahil edildiği görülüyor. Sanırım bu yüzden bu işe yarıyor (çünkü blok seviyesindeki elemanlar arasındaki boşluk önemsiz hale geliyor) ama neden yaşamam için bunun neden olacağını düşünmüyorum ve orada düşünmemek için oldukça emin olacağım. Bundan kurtulmanın kolay bir CSS yöntemi olacak. – Chris

+0

Daha iyi formüle edemedim. Önemli bir boşluk olarak kabul edilen ve bu nedenle gerçek alan olarak kabul edilen bir BR, Google Chrome oluşturma motorunda bana bir hata gibi geliyor. Yok hayır ? – Linefeed

+1

@Linefeed: Kabul ediyorum ve benzer bir hata raporu: http://code.google.com/p/chromium/issues/detail?id=40634 – thirtydot

0

Tarayıcıların her biri HTML'yi farklı yollarla ele aldığından (bkz. Quirks modu) sayfanın stilini değiştirmek için CSS kullanmanız gerekir. Aynı görünümün tümünü (veya olabildiğince çok) sürdürmek için Eric Meyer'in Reset Reloaded gibi bir CSS sıfırlaması ile başlamanızı öneririm. Ardından stilleri istediğiniz gibi ayarlayabilirsiniz.

+0

Hatta bir CSS ile sorunu sıfırlamak aynı kalır. Ne tür stilleri ayarladığımı belirtmek, soruma büyük bir cevap olacaktır. – Linefeed

+0

Tamam, CSS'yi bilmeden, muhtemelen istediğiniz şeyi kullanıyorsunuz, söz konusu hücre (ler) için metin hizalama özelliğini ayarlayın. Bununla birlikte, aynı zamanda dolgudan da etkileneceksiniz, böylece ayarlanması da gerekebilir. W3'ün masalarda mükemmel bir dökümanları var: http://www.w3.org/TR/CSS2/tables.html – Neil

+2

soru, soruyu tekrarlamak için ihtiyacınız olan her şeye sahiptir, böylece CSS hakkında daha fazla bilgi sahibi olmanıza gerek yoktur. . – Chris

İlgili konular