Как заставить работать минимальную высоту в Safari, Chrome на MAC - PullRequest
Новая
       4

Как заставить работать минимальную высоту в Safari, Chrome на MAC

4 голосов
/ 22 августа 2010

У меня есть страница со следующим CSS, она хорошо отрисовывается в IE и FF, но на Mac в Safari и Chrome минимальная высота не работает, и все содержимое сворачивается друг на друга, когда страница браузера является коротким вместо того, чтобы оставаться расширенным и предоставлять полосы прокрутки: 

<style type="text/css">
    html, body {
   height: 100%;
        width: 100%;
    }
    body {
   height: 100%;
        width: 100%;
        background: #000000;
        font: 86% Arial, "Helvetica Neue", sans-serif;
        margin: 0;   
        padding: 0px;
        color: #CCCCCC;
    }
    #website_wrapper {
        min-height: 850px;
   min-width: 1080px;
        height: 100%;
        width: 100%;
    }
    #website {
        height: 100%;
        width: 100%;
        background-color: #000000;
        vertical-align: bottom;
    }

Есть идеи, почему Safari (я думаю, WebKit) не делает то, что ему говорят? Заранее спасибо ...

Ответы [ 3 ]

3 голосов
/ 08 марта 2016

По какой-то причине я сталкиваюсь с аналогичной проблемой, когда моя навигационная панель в Safari отличается от других браузеров.

Чтобы исправить это, я использовал min-height: initial

Я такжеобернул это в медиа-запрос, относящийся к сафари, чтобы избежать возможных конфликтов:

есть ли взлом css только для сафари НЕ chrome?

1 голос
/ 24 августа 2010

Следующий пример работает для меня на Mac OS X 10.6.4 с использованием Safari 5.0.1 (не уверен, какая версия Webkit): 

<html>
    <head>
    <!--
        <style>
        .box1 {
            float: left;
            width: 100px;
            margin: 1em 20px 1em 0;
            background: yellow;
            border: 1px solid black;
            min-height: 100px;
        }
    -->
    </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box1">less text</div>
        <div class="box1">more text more text more text more text more text more text</div>
    </body>
</html>

Я не могу сказать из вашего примера, как вы реализуете свои стили, так как вы показываете только определения стилей. Еще одна вещь, которую я заметил, это то, что вы определяете стили идентификаторов (# обозначение) вместо стилей класса (точечная запись). Хотя это также работает, рекомендуется определять стили классов, когда вы хотите применить стиль к нескольким элементам.

Если этот пример вам не поможет, возможно, вы можете вставить некоторый HTML-код, показывающий, КАК вы используете свои стили.

0 голосов
/ 22 августа 2010
Предполагается, что

min-height теперь поддерживается в Safari, но вы можете попробовать взломать underscore :

min-height: 850px;высота: авто;_height: 850px;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...