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

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

3 ответа

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

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

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

есть ли css-хак для сафари только НЕ хром?


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

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

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

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


Предполагается, что min-height будет поддерживаться в Safari, но вы можете попробовать подчеркнуть hack:

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

licensed under cc by-sa 3.0 with attribution.