позиционирование работает в ff, chrome, но не в ie7

У меня есть несколько div, которые я разместил с

position:absolute;
width:100px;
margin:-20px 420px;

так же, как этот, еще один ... проблема в том, что он отлично выглядит в chrome и firefox, но в ie7 эти div перемещаются. как сделать так, чтобы он выглядел идеально во всех браузерах ?? спасибо отредактировано:

.button {
  display:block;
  position:absolute;
  width:200px;
  height:50px;
  background:url(../images/portfolio.gif) no-repeat 0 -49px;
  margin:-50px 420px;
}
.button a {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  background:url(../images/portfolio.gif) no-repeat 0 0;
  text-indent:-9999px;
}
.button a:hover {
  background-position: 0 50px;
}


.button1 {
  display:block;
  position:absolute;
  width:200px;
  height:50px;
  background:url(../images/design-brief.gif) no-repeat 0 -49px;
  margin:-20px 420px;
}
.button1 a {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  background:url(../images/design-brief.gif) no-repeat 0 0;
  text-indent:-9999px;
}
.button1 a:hover {
  background-position: 0 50px;
}

эти две кнопки, button и button1 находятся внутри этого div вместе с некоторым текстом

.cont
{
position:relative;
width:1400px;
height:500px;

}

html css internet-explorer positioning internet-explorer-7
person simple-coder    schedule 06.01.2011    source источник
comment
Можете ли вы опубликовать живой пример и остальную часть соответствующего кода? Нам нужно увидеть, как этот div взаимодействует с другими (относительно чего он позиционируется) :) Вы можете использовать jsFiddle.net, если вы не можете предоставить пример на своем собственном сервере.   -  person Kyle    schedule 06.01.2011
comment
Не могли бы вы объяснить, что вы имеете в виду под «отъездом»? Они вообще двигаются, но немного отклоняются? Массово отключены? Не могли бы вы опубликовать код из HTML?   -  person Matt Asbury    schedule 06.01.2011
comment
отредактировал мой код ... пожалуйста, проверьте все   -  person simple-coder    schedule 06.01.2011
comment
Я понимаю, что отрицательная маржа выше, чем высота ‹div›, проблематична ..!   -  person MatTheCat    schedule 06.01.2011

Ответы (3)


arrow_upward
0
arrow_downward

Я думаю, вам нужно установить top:0px и left:0px. Вы не можете использовать position:absolute без установки реальной позиции.

Или: вы можете попробовать position:static или position:relative, я не уверен, что вы хотите сделать.

person Floern    schedule 06.01.2011

arrow_upward
0
arrow_downward

Не используйте поля для размещения кнопок. Если вы сделали это position:absolute;, используйте top: 0px; left: 0px; (очевидно, установив их в желаемое положение). Поскольку вы установили родительский div .cont как position:relative;, кнопки будут установлены в этом div, пока они находятся в DOM. Итак, если бы вы установили их top: 0px; left: 0px;, кнопки были бы в верхнем левом углу div.

Намного надежнее, чем играть с отрицательной маржей.

person Matt Asbury    schedule 06.01.2011

arrow_upward
0
arrow_downward

Согласитесь с Мэттом Эсбери ... Если вы используете позиции, то маржа не используется. И еще кое-что, вы используете абсолютное положение для кнопок. в этом случае не используйте position для его дочернего элемента, если и до тех пор, пока вы не захотите также позиционировать его дочерний элемент. Если вы можете предоставить html, тогда будет легко понять код и помочь.

person Mahima    schedule 19.01.2011