wyświetlacz: blok w linii i przepełnienie: ukryty prowadzący do innego wyrównania w pionie

Następujący kod renderuje się inaczej w różnych przeglądarkach (IE = FF = wyższy od linii podstawowej, Chrome = na linii bazowej).wyświetlacz: blok w linii i przepełnienie: ukryty prowadzący do innego wyrównania w pionie

Czyja to wina? Gdzie powinienem zgłosić zgłoszenie błędu?
Czy wiesz, jak uzyskać tę rozwiązaną między przeglądarkami. Jeśli zmienię wyrównanie w pionie, uruchomię to w niektórych przeglądarkach, ale nie w innych.

<!doctype html> 
<html> 
<head> 
    <style> 
     .a { 
      display: inline-block; 
      overflow: hidden; 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    baseline__<div class="a">test</div>__baseline 
</body> 
</html>

http://jsfiddle.net/T2vQj/

Źródło

2013-02-14 mh543

Wygląda na to, że Chrome jest w błędzie. CSS 2.1 spec mówi

Linia bazowa o „inline-block” jest linia bazowa jego ostatniego pola liniowego w układzie normalnym, o ile nie ma albo nie w przepływowym pól liniowych lub jeśli jego „przepełnienie” rzeczowych ma wartość obliczoną inną niż "widoczna", w tym przypadku linia bazowa jest dolną krawędzią marginesu.

Ponieważ właściwość overflow oblicza się czymś innym niż „visible” bazowy inline-block jest dolna krawędź margines, który siedzi na linii pola liniowego zawierającego, a zatem należy podnieść do góry zawartego tekstu, aby umożliwić miejsce dla potomków tego tekstu.

Źródło

2013-02-14 08:16:04 Alohci

Wielkie dzięki. http://code.google.com/p/chromium/issues/detail?id=176244 – mh543

Tak. Musisz to zrobić:

Usuń styl overflow: hidden;. To nie jest potrzebne tutaj. Potrzebujesz tego tylko wtedy, gdy podasz width lub text-overflow: ellipsis;.
Dodaj vertical-align: bottom;. Pionowe wyrównanie tekstu zmieni się po zmianie wyświetlacza z inline na inline-block.

Źródło

2013-02-14 07:56:48

1. wydałem minimalny przykład roboczy. Zostawiłem wszystko, co nie jest potrzebne do odtworzenia zachowania, które zamierzałem pokazać. 2. Nie, wyrównanie pionowe prowadzi do różnych wyników w różnych przeglądarkach, zgodnie z opisem w oryginalnym wpisie. – mh543

Tak. Każda przeglądarka obsługuje w nich domyślną wartość 'inline-block'. –

-1

Try This

<!doctype html> 
<html> 
<head> 
    <style> 
     .a { 
      display: inline; 
      overflow: hidden; 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    baseline__<div class="a">test</div>__baseline 
</body> 
</html>

Źródło

2013-02-14 09:13:02 Kingk

wyświetlacz: blok w linii i przepełnienie: ukryty prowadzący do innego wyrównania w pionie

Odpowiedz

Powiązane problemy