Проблемища при масштабировании

monsterr · May 4, 2011

При масштабировании ("ctrl"+"-") блоки съезжают друг под друга. Это такой баг браузеров и стоит забить, или же нужно делать как-то по-другому?

При смене же разрешения ничего не смещается. Ну не переношу, когда вёрстка разваливается при масштабировании Это не первый момент с float в моих работах, раньше забивал, теперь хочется понять, почему так происходит? спасибо заранее

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<style>
		html,body, div,ul,li {
			margin: 0;
			padding: 0;
		}
		.content {
			margin: 0 auto;
			width: 644px;
			overflow: hidden;
			background-color: #CCC;
		}
		.list {
			list-style-type: none;
		}
		.list li {
			float: left;
			width: 320px;
			border: 1px solid #aaa;
			background-color: #FFF;
		}
	</style>
</head>
<body>
	<div class="content">
		<ul class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
</body>
</html>

Edited May 4, 2011 by monsterr

psywalker · May 4, 2011

В каком браузере косяк?

monsterr · May 4, 2011

В файрфоксе и IE.

Но обычно подобный (но не этот) код косячит также и в опере, в хроме и сафари без проблем.

psywalker · May 4, 2011

Проверил в ФФ3.6 и ФФ4, всё в порядке. Давай тестовую страницу и скрины с косяками.

monsterr · May 4, 2011

Самое интересное, что чем больше пикселей убираешь, тем под большее разрешение перестаёт появляться смещение. Пару пикселей убрать - для 1280x1024 становится нормально, и так далее.

psywalker · May 4, 2011

Контейнеру ширину в em ставь, а не в px

monsterr · May 4, 2011

Нет, это не помогает(. У тебя, как я понял, всё нормально везде? без косяков?

Как у других? проверьте кто-нибудь пожалуйста

psywalker · May 4, 2011

Нет, это не помогает(. У тебя, как я понял, всё нормально везде? без косяков?
Как у других? проверьте кто-нибудь пожалуйста

У меня тоже так же как и у тебя. Я прописал ширину в em (главного контейнера) и всё стало отлично.

monsterr · May 4, 2011

А какое значение em поставил?

psywalker · May 4, 2011

А какое значение em поставил?

Не помню уже, щас в другом месте. Главное, чтобы блоки не распадались.

.content {

ширина может 45

monsterr · May 4, 2011

Наверное ты просто больше поставил, чем есть на самом деле.

659px = 41.188em.

ширина .content = 659px, и ни пикселем больше.

Странный очень случай не знаю даже что уже делать

psywalker · May 4, 2011

Проблема в отступах, убери марджины ещё + сделай все измерения на em. И вообще как ты их рассчитываешь, от чего пляшешь, непонятно, если у тебя в боди не стоит вообще шрифта.

Temiks · May 4, 2011

а нужно вообще заботится о том что когда масштаб меняешь все расползается? ведь все должно хорошо смотреться при 100%, а если пользователь ставит масштаб больше или меньше и у него все расползается, то это его проблемы, пусть не уменьшает и не увеличивает масштаб, а если у него со зрением плохо, то для этого есть спец программы, например та же лупа

monsterr · May 4, 2011

Проблема в отступах, убери марджины ещё + сделай все измерения на em. И вообще как ты их рассчитываешь, от чего пляшешь, непонятно, если у тебя в боди не стоит вообще шрифта.

Отступы здесь не при чём, разные ситуации рассматривал. Но для наглядности, упростил и заменил код в первом посте.

Насчёт размера шрифта, брал по умолчанию 16. Но если указать вручную, то погоды это не сделает.

В общем, я нашёл причину: виноват border. Без него всё отлично (ширину разумеется дополнял), с ним же - не правильно масштабируется страница. Отказаться от него никак нельзя, да уж, придётся мне помозговать над обходным путём

psywalker · May 4, 2011

Проблема в отступах, убери марджины ещё + сделай все измерения на em. И вообще как ты их рассчитываешь, от чего пляшешь, непонятно, если у тебя в боди не стоит вообще шрифта.
Отступы здесь не при чём, разные ситуации рассматривал. Но для наглядности, упростил и заменил код в первом посте.
Насчёт размера шрифта, брал по умолчанию 16. Но если указать вручную, то погоды это не сделает.
В общем, я нашёл причину: виноват border. Без него всё отлично (ширину разумеется дополнял), с ним же - не правильно масштабируется страница. Отказаться от него никак нельзя, да уж, придётся мне помозговать над обходным путём

Попробуй отказаться от бордера, засунь в ЛИ дивы и им уже повесь бордер и отступы.

monsterr · May 4, 2011

Проблема в отступах, убери марджины ещё + сделай все измерения на em. И вообще как ты их рассчитываешь, от чего пляшешь, непонятно, если у тебя в боди не стоит вообще шрифта.
Отступы здесь не при чём, разные ситуации рассматривал. Но для наглядности, упростил и заменил код в первом посте.
Насчёт размера шрифта, брал по умолчанию 16. Но если указать вручную, то погоды это не сделает.
В общем, я нашёл причину: виноват border. Без него всё отлично (ширину разумеется дополнял), с ним же - не правильно масштабируется страница. Отказаться от него никак нельзя, да уж, придётся мне помозговать над обходным путём
Попробуй отказаться от бордера, засунь в ЛИ дивы и им уже повесь бордер и отступы.

Первая мысль была так сделать, как и поступлю наверное, очередное правда извращение.

А ты с таким в своей практике не встречался? Просто это обычный каталог, как товары в интернет-магазине, странно, что до меня никто не сталкивался с этим.

А в общем спасибо за помощь!

psywalker · May 4, 2011

Проблема в отступах, убери марджины ещё + сделай все измерения на em. И вообще как ты их рассчитываешь, от чего пляшешь, непонятно, если у тебя в боди не стоит вообще шрифта.
Отступы здесь не при чём, разные ситуации рассматривал. Но для наглядности, упростил и заменил код в первом посте.
Насчёт размера шрифта, брал по умолчанию 16. Но если указать вручную, то погоды это не сделает.
В общем, я нашёл причину: виноват border. Без него всё отлично (ширину разумеется дополнял), с ним же - не правильно масштабируется страница. Отказаться от него никак нельзя, да уж, придётся мне помозговать над обходным путём
Попробуй отказаться от бордера, засунь в ЛИ дивы и им уже повесь бордер и отступы.
Первая мысль была так сделать, как и поступлю наверное, очередное правда извращение.
А ты с таким в своей практике не встречался? Просто это обычный каталог, как товары в интернет-магазине, странно, что до меня никто не сталкивался с этим.
А в общем спасибо за помощь!

Мне ни разу не приходилось считать проблемой ctrl+, т.е. все браузеры по разному могут таким образом масштабировать текст и если при таком подходе что-то развалится, то это уже проблема пользователя. Я имею ввиду ctrl-.

Если принципиально важно для тебя, то сделай любой ценой.

Serlutin · May 4, 2011

а нужно вообще заботится о том что когда масштаб меняешь все расползается?

Нужно. Может быть не обязательно для всех размеров, но хотя бы 80%-120% должны выглядеть нормально.

А проблема вот в чём. При масштабировании, у FF иногда почему-то случается глюк с border ( а может и не глюк) и он превращается из 1px в 2px. Причём в FireBug'е это не показывается. Поэтому у вас при масштабировании появляется лишних 4px, и всё расползается.

Edited May 4, 2011 by Serlutin

amuller · June 1, 2011

У меня похожая проблема. При уменьшении масштаба появляется белая горизонтальная полоса, не понятно, откуда она берется...у меня бордеров горизонтальных вообще нет. Может, кто-нибудь что-то посоветует? Вот страница http://www.amuller.500mb.net/verstka2/index.html Вообще можно подложить под низ темный фон, но не хочется создавать для этого лишний див. По вертикали тоже при уменьшении съезжал блок, я просто уменьшила ширину на 1 пиксель. Вообще странно..если б это был какой-то глюк FF, то можно было бы так и оставить. Но так показывает везде(FF, Safari, Опера).Только в IE нормально.

psywalker · June 1, 2011

У меня похожая проблема. При уменьшении масштаба появляется белая горизонтальная полоса, не понятно, откуда она берется...у меня бордеров горизонтальных вообще нет. Может, кто-нибудь что-то посоветует? Вот страница http://www.amuller.500mb.net/verstka2/index.html Вообще можно подложить под низ темный фон, но не хочется создавать для этого лишний див. По вертикали тоже при уменьшении съезжал блок, я просто уменьшила ширину на 1 пиксель. Вообще странно..если б это был какой-то глюк FF, то можно было бы так и оставить. Но так показывает везде(FF, Safari, Опера).Только в IE нормально.

Ну тогда лови решение подруга:

div.header {
    background: url("../i/logo.png") no-repeat scroll 0 0 transparent;
    font: 13px 'Trebuchet MS',Arial,sans-serif;
    height: 194px;
    overflow: hidden;

amuller · June 1, 2011

У меня похожая проблема. При уменьшении масштаба появляется белая горизонтальная полоса, не понятно, откуда она берется...у меня бордеров горизонтальных вообще нет. Может, кто-нибудь что-то посоветует? Вот страница http://www.amuller.500mb.net/verstka2/index.html Вообще можно подложить под низ темный фон, но не хочется создавать для этого лишний див. По вертикали тоже при уменьшении съезжал блок, я просто уменьшила ширину на 1 пиксель. Вообще странно..если б это был какой-то глюк FF, то можно было бы так и оставить. Но так показывает везде(FF, Safari, Опера).Только в IE нормально.
Ну тогда лови решение подруга:
div.header {
    background: url("../i/logo.png") no-repeat scroll 0 0 transparent;
    font: 13px 'Trebuchet MS',Arial,sans-serif;
    height: 194px;
    overflow: hidden;

Спасибо!Теперь все как надо)А можешь хотя бы в двух словах объяснить, почему оно так? При чем тут overflow:hidden и хэдер..проблема ж по-моему не с хэдером, а ниже в блоке content. Я знаю, что overflow:hidden задает новый контекст форматирования, наверно с этим как-то связано? но все равно не понятно(

Edited June 1, 2011 by amuller

amuller · June 1, 2011

А все,дошло.Хэдер неправильно масштабировался и наезжал на content,для этого overflow:hidden.

Edited June 1, 2011 by amuller

Sign In

Проблемища при масштабировании

Question

Link to comment

Share on other sites

21 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information