Question

它适用于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：我最初将它们作为单独的ID（我只是搞乱了jquery看到了什么哈哈）

Answer 1

给它css of

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

或只是

top: 0px;
left: 0px;

Answer 2

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);

Answer 3

请改为尝试：

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。

Chrome中的绝对定位？

3 个答案: