Исправление проблемы вертикального выравнивания Webkit с <sup>и CSS вертикальным выравниванием: сверху на TD - PullRequest
Новая
       9

Исправление проблемы вертикального выравнивания Webkit с <sup>и CSS вертикальным выравниванием: сверху на TD

0 голосов
/ 27 января 2012

Сделан крупный пересмотр для демонстрации проблемы и выяснения причины в CSS:

Chrome и Safari отображают этот код: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
BODY { background:#fff; }
.survey_table TD {
    vertical-align:top;
}
</style>
</head>
<body>
<table class="survey_table">
<tbody>
<tr>
<td>
2. Are you familiar with the <a href="http://example.com">Louisiana Sanitary Code</a><sup>1</sup> requirements for laboratories to report notifiable (reportable) conditions to the Louisiana Office of Public Health?
</td>
</tr>
</tbody>
</table>
</body>
</html>

Как это:

screenshot of chrome

Firefox и IE отображают это так:

screenshot of firefox

Проблема исходит от CSS на TD vertical-align:top; Кто-нибудь знает, как получить браузеры Webkitотображать как FF и IE и сохранять вертикальное выравнивание CSS?

Ответы [ 2 ]

2 голосов
/ 04 августа 2015

, поскольку он отлично работает везде, кроме таблиц, я просто сделал это: 

table sup {
    font-size: .85em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.6em;

Дает приемлемый результат как в Chrome, так и в Explorer

1 голос
/ 07 декабря 2012

У меня была такая же проблема и я решил использовать относительное позиционирование;

Неправильный рендеринг в таблице с valign = top в Chrome и Safari

...