Позиционирование слоев в разных браузерах

Safronik · March 6, 2011

Следующий код в браузере Chrome и Operа отображается по разному:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#id {
	position: absolute;
	margin-top: 10%;
	margin-left: 10%;
	width: 100px;
	height: 10%;
	background-color: black;
}
#id2 {
	position: absolute;
	margin-top: 20%;
	margin-left: 10%;
	width: 100px;
	height: 10%;
	background-color: green;
}
</style>
</head>
<body>
<div id="id">First layer</div>
<div id="id2">Second layer</div>
</body>
</html>

Проблема в том что Opera почему-то делает не большой промежуток между слоями. Много чего перепробовал. Если задавать отступы в пикселях и.т.п., отображается корректно. Может виноват доктайп?

Кто сталкивался, подскажите...

Edited March 6, 2011 by Safronik

psywalker · March 6, 2011

Виновато ваше незнание мат.части. Отступы у тебя пляшут от ширины родителя, в данном случае это body, а значит ширины экрана.

Safronik · March 6, 2011

извиняюсь, выложил не совсем правильный код. исправил.

хм. не совсем понял, то есть совсем не понял... смысл в том что бы эти два слоя располагались друг под другом, без зазоров. хром выводит все замечательно. но опера на сколько я понял использует разные %(от body) для высоты слоя и отступа...

Вот что показывает опера:

Edited March 6, 2011 by Safronik

tt48 · March 6, 2011

#id {
position: absolute;
top: 10%;
/*margin:10% 0 0 10%;*/
margin:0;
margin-left:10%;
width: 10%;
height: 10%;
background: black;
}
#id2 {
position: absolute;
top: 20%;
/*margin:20% 0 0 10%;*/
margin:0;
margin-left:10%;
width: 100px;
height: 10%;
background: green;
}
html,body{
	height: 100%;
	margin:0;
	padding:0;
}

так показывает получше, но в FF нету пиксельного промежутка,

а в хроме и опере есть.

А почему это должно зависеть от ширины? Высота еще понятно..

Где об этом можно почитать (keyword если можно)?

С уважением, Олег.

psywalker · March 6, 2011

А почему это должно зависеть от ширины? Высота еще понятно..
Где об этом можно почитать (keyword если можно)?
С уважением, Олег.

В спеке.

Serlutin · March 6, 2011

Если вы используете position: absolute, то не надо элементы позиционировать с помощью полей. Сделайте так:

top: 10%;
left: 10%;

и всё у вас получится.

Safronik · March 7, 2011

Если вы используете position: absolute, то не надо элементы позиционировать с помощью полей. Сделайте так:
#id {
position: absolute;
top: 10%;
/*margin:10% 0 0 10%;*/
margin:0;
margin-left:10%;
width: 10%;
height: 10%;
background: black;
}
#id2 {
position: absolute;
top: 20%;
/*margin:20% 0 0 10%;*/
margin:0;
margin-left:10%;
width: 100px;
height: 10%;
background: green;
}
html,body{
	height: 100%;
	margin:0;
	padding:0;
}
так показывает получше, но в FF нету пиксельного промежутка,
а в хроме и опере есть.
А почему это должно зависеть от ширины? Высота еще понятно..
Где об этом можно почитать (keyword если можно)?
С уважением, Олег.

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

Sign In

Позиционирование слоев в разных браузерах

Question

Safronik

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Safronik

Link to comment

Share on other sites

tt48

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Serlutin

Link to comment

Share on other sites

Safronik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information