dlaczego nowoczesnych przeglądarek nadal stawiać spacji między blokiem inline jeśli istnieje spacje

Jeśli masz znaczników tak:dlaczego nowoczesnych przeglądarek nadal stawiać spacji między blokiem inline jeśli istnieje spacje

<div class="inlineblock">one</div> 
<div class="inlineblock">two</div> 
<div class="inlineblock">three</div>

i CSS tak: .inlineblock {display: inline-block; }

Otrzymasz spacje między elementami. około 4 pikseli przestrzeni. chyba że Twój znacznik wygląda następująco:

<div class="inlineblock">one</div><div class="inlineblock">two</div><div class="inlineblock">three</div>

Teraz chciałbym wiedzieć, DLACZEGO?

Co to jest techniczny powód, że "dobre" przeglądarki nadal to robią, nawet najnowszy Firefox, Chrome i Opera w czasie tego postu nadal to robią. Zakładam, że jest za tym techniczny powód, w przeciwnym razie zostałby już naprawiony?

Dzięki!

Źródło

2013-05-22 deweydb

Dlaczego nie? Elementy bloku inline są zaprogramowane tak, aby pojawiały się w linii z tekstem. Jeśli między tobą jest tekst, to powinien być renderowany. – zneak

Nie zauważyłeś usterki (w rzeczywistości nie jest to porażką) w zepsutych czasach, dlaczego większość z nich nie mogła całkowicie znieść "bloku inline". To nie jest błąd, polecam użyć CSS-Reset. Przeczytaj moją odpowiedź: http://stackoverflow.com/questions/16698142/why-do-modern-browsers-still-put-spaces-between-inline-block-if-there-is-whitesp/16698173#16698173 –

@Guilherme Nascimento Nie wiem, dlaczego robisz dyskusję na temat starych przeglądarek i ich wad. To nie miało nic wspólnego z pytaniem. – deweydb

To jest dokładnie to, co powinien zrobić zrobić.

Przestrzenie między elementami śródliniowymi nie różnią się od spacji między wyrazami.

Jeśli nie chcesz tego, użyj elementów bloków lub ustaw rozmiar czcionki na zero.

Źródło

2013-05-22 17:33:28 SLaks

Dokładnie, tak jak wtedy, gdy robisz "", oczekujesz "ab", a nie "ab", a kiedy piszesz "Hello World", oczekujesz "Hello World", a nie "HelloWorld" –

Dzięki, zrobiłem Myślę o tym w ten sposób, głównie myślałem o tym, jak nienawidzę wyglądu mojego znacznika, ale myślę, że wystarczy hack rozmiaru czcionki. Twoje zdrowie. – deweydb

Cóż, są między nimi spacje! Aby uzyskać poprawkę, spróbuj użyć font-size: 0 w elemencie nadrzędnym.

Źródło

2013-05-22 17:34:41 gustavohenke

Istnieje lepszy sposób na usunięcie białej przestrzeni niż ustawienie rozmiaru czcionki na zero (ponieważ ta metoda ma nieprzyjemne efekty uboczne). Zamiast tego możesz wpisać słowo:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

section { 
    word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/ 
    display:table;/* Webkit Fix */ 
} 

div { 
    width: 100px; 
    height: 40px; 
    background: #e7e7e7; 
    padding: 10px; 
    display:inline-block; 
    word-spacing:0; /* reset from parent*/ 
} 

</style> 
</head> 
<body> 
<section> 
    <div>one</div> 
    <div>two</div> 
    <div>three</div> 
</section>   
</body> 
</html>

Źródło

2013-08-26 12:53:14

To jest rozwiązanie.

<style> 
    * { 
    border:0; 
    margin:0; 
    padding:0; 
    box-shadow:0 0 1px 0px silver; 
    } 
    .foo { 
    width: 100%; 
    } 
    .bar { 
    width: 50%; 
    float:left; 
    text-align: center; 
    } 
    </style> 
    <div class="foo"> 
     <div class="bar"> 
      ...a new customer 
     <!-- the whitespace between the following divs affects rendering - why? --> 
     </div> <div class="bar"> 
      ...an existing customer 
     </div> 
    </div>

Źródło

2013-08-26 13:51:45

dlaczego nowoczesnych przeglądarek nadal stawiać spacji między blokiem inline jeśli istnieje spacje

Odpowiedz

Powiązane problemy