overflow-y скрывает содержимое страницы в браузерах webkit (Chrome и Safari) - PullRequest
Новая
       12

overflow-y скрывает содержимое страницы в браузерах webkit (Chrome и Safari)

4 голосов
/ 06 января 2011

В настоящее время я делаю наш веб-сайт поддерживаемым всеми основными браузерами, и я столкнулся с очень странной проблемой - атрибут oveflow-y стал причиной скрытия моих данных.Ниже приведен пример упрощенного кода, который работает в IE и Firfox, но не работает в Safari и Chrome.Это 100% допустимый код, и я не уверен, почему он не отображается должным образом в браузерах webkit.

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

<body style="height: 100%;">

<form action="Webkit_Problem.html" style="height: 100%;">
<table style="height: 100%;">
    <tr>
        <td>
            <div style="overflow-y: auto; height: 100%;">
                THIS SHOULD BE VISIBLE
            </div>
        </td>
    </tr>
</table>
</form>
</body>
</html>

http://www.alocet.com/VictorsTestFolder/Webkit_Problem.html (живой пример здесь)

Единственный способ заставить его работать - это удалить атрибуты height: 100% для div или тег таблицы (которыйиспортит цель моего html) или добавит высоту: 100% к тегу html

У кого-нибудь есть предложения?

Спасибо

Ответы [ 2 ]

3 голосов
/ 07 января 2011

Проблема в том, что когда вы используете height: 100%;, он устанавливает высоту вашего элемента относительно его родителя.Это означает, что если ваш родительский элемент не имеет установленной высоты, он будет автоматически равен 0px height или только высоте вашего контента.

Чтобы ваш код работал, вам нужно установить для body и html значение 100%: 

html, body{ height:100%; }
0 голосов
/ 07 января 2011 
<form action="Webkit_Problem.html" style="height: 100%;">
<table style="height: 100%;">
    <tr>
        <td>
            <div style="overflow-y: auto; height: 100%;">
                THIS SHOULD BE VISIBLE
            </div>
        </td>
    </tr>
</table>
</form>

Необходимо закрыть атрибуты стиля кавычками

...