Абсолютное позиционирование в Chrome? - PullRequest
Новая
       1

Абсолютное позиционирование в Chrome?

0 голосов
/ 29 января 2012

Работает в IE / FF, но не в Chrome. 

    html += '<div id = "note" style = "position: absolute; background-color:'
           + newcss[0] + '; margin-left:'
           + newcss[1] + '; margin-top:'
           + newcss[2] +  '; width = 100px; height = 100px;">'
           + newnote + '</div>';

По сути, я добавляю на страницу новую заметку со случайными цветами и позициями слева и сверху (сохраняет в newcss).

Рисунок IE против Chrome (IE слева):

http://i.imgur.com/jMn0K.png

РЕДАКТИРОВАТЬ: Да, это была ошибка;width: и height: исправляет, что он на самом деле имеет правильный размер, но все они просто вставляются в одно и то же место прямо под панелью, а не в случайные пробелы

EDIT2: у меня изначально они были как отдельные идентификаторы (Я просто возился с jquery, чтобы увидеть что-то, ха-ха)

Ответы [ 3 ]

1 голос
/ 29 января 2012

CSS неверен. Правила стиля Css имеют вид key:val;, а не key=vale. Абсолютное позиционирование позволяет вам определять значения top left bottom и right и размещать объект в этой позиции (относительно страницы или содержащего элемента (если для этого элемента установлено position:relative)). Используйте их для размещения абсолютных элементов.

Также вам, вероятно, следует использовать объекты DOM, а не innerHTML. 

var div = document.createElement('div');

div.setAttribute('class', 'note');

div.style.width = '100px';
div.style.height = '100px';
div.style.position = 'absolute';
div.style.backgroundColor = newcss[0];
div.style.top = newcss[1] + 'px';
div.style.left = newcss[2] + 'px';
container.appendChild(div);

Еще лучше, определив материал, который никогда не меняется, как правило стиля, а затем использовать Javascript только для установки динамического содержимого. 

.note {
    position: absolute;
    width: 100px;
    height: 100px;
}

Тогда все, что вам нужно сделать, это установить top left и background-color

div.setAttribute('class', 'note');
div.style.backgroundColor = newcss[0];
div.style.top = newcss[1] + 'px';
div.style.left = newcss[2] + 'px';
container.appendChild(div);
1 голос
/ 29 января 2012

дайте ему CSS 

top: 0px;
left: 0px;
margin-top: newcss[2];
margin-left: newcss[1];
display: block;

или просто 

top: 0px;
left: 0px;
0 голосов
/ 29 января 2012

Попробуйте вместо этого: 

html += '<div class = "note" '
     + 'style="position: absolute; '
     + 'background-color:' + newcss[0] + '; '
     + 'left:' + newcss[1] + '; '
     + 'top:' + newcss[2] + '; '
     + 'width: 100px; height: 100px;">' + newnote + '</div>';

Изменения:

  • Изменено id на class;недопустимо, чтобы два элемента имели одинаковые id в одном документе.
  • Изменены margin-left и margin-top на left и top.
...