Geek asks and answers

Display: built-in block and overflow: hidden, resulting in different vertical alignment

The following code displays differently in different browsers (IE = FF = above baseline, Chrome = on baseline).

  • Whose mistake is this? Where should I indicate an error report?

  • Do you know how to get this cross-browser enabled. If I change the vertical alignment, I can make it work in some browsers, but not in others.

<!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/

+5
source share
3 answers

Chrome seems to be mistaken. CSS 2.1 specification reports

" " - , , "" , "", .

, "", - , , , descenders .

+3

. :

  • overflow: hidden;. . , width text-overflow: ellipsis;.

  • vertical-align: bottom;. , inline inline-block.

+1

try it

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

More articles:


All Articles