Html CSS工具提示箭头位于浏览器之间的两个不同位置

我一直在做这个小练习项目，我得到的大多数东西看起来都一样，尽管输入有点痛苦

有一件事我搞不清楚，那就是我的CSS箭头，我不明白为什么它在浏览器之间处于两个不同的位置。我认为只有在chrome中才能正确排列

以下是其中一项：

箭头是用

创建的。添加颜色：在
之前


var$colorplate=$（“.select color-ul”）；
var$canvas=$（“#canvas”）；
var ctx=$canvas[0].getContext（“2d”）；
var mouseDown=false；
$colorPalette.on（“单击”，“li”，函数（））{
选择颜色（$（this））；
});
功能选择颜色（e）{
e、 兄弟姐妹（）.removeClass（“选定”）；
e、 addClass（“选定”）；
}
$（“.new color btn”）。单击（“单击”，函数（）{
$（“.add color”）.toggle（）；
});
$（“.rgb滑块输入”）.change（函数（）{
$（“.color preview”）.css（“背景”，currentColor（））；
})
函数currentColor（）{
var r=$（“#红色”）.val（）；
var g=$（“#绿色”）.val（）；
var b=$（“#蓝”）.val（）；
var color=“rgb”（“+r+”、“+g+”、“+b+”）；
返回颜色；
}
$（“.add color btn”）。在（“单击”，函数（）上）{
var$newColor=$（“
”）；
$newColor.css（“背景”，currentColor（））；
$colorplate.append（$newColor）；
选择颜色（$newColor）；
$（“.add color”）.toggle（）；
});
$canvas.mousedown（函数（e）{
lastEvent=e；
mouseDown=true；
}).mousemove（函数（e）{
如果（鼠标向下）{
ctx.beginPath（）；
ctx.moveTo（lastEvent.offsetX，lastEvent.offsetY）；
ctx.lineTo（e.offsetX，e.offsetY）；
ctx.strokeStyle=$（“.selected”）.css（“背景色”）；
ctx.lineWidth=$（“#行大小”）.val（）；
ctx.lineJoin=ctx.lineCap='round'；
//context.globalAlpha=$（“#opacitySlider”）.val（）/10；
ctx.stroke（）；
lastEvent=e；
}
}).mouseup（函数（）{
mouseDown=false；
}).mouseleave（函数（）{
$canvas.mouseup（）；
});
正文{
背景：线性梯度（90度，#517fa4 10%，#243949 90%）；
}
帆布{
显示：块；
背景：#fff；
利润率：10px自动；
边界半径：5px；
游标：url（“http://i.imgur.com/ciZXEOf.png违约；
}
.控制{
文本对齐：居中；
保证金：0自动；
}
.线滑块#线尺寸{
宽度：250px；
}
.线滑块：之前{
内容：“；
显示：内联块；
位置：相对位置；
顶部：-5px；
右：5px；
高度：15px；
宽度：2倍；
背景：#fff；
}
.直线滑块：之后{
内容：“；
显示：内联块；
位置：相对位置；
顶部：-5px；
左：5px；
高度：15px；
宽度：6px；
背景：#fff；
}
.选择颜色{
利润率：0px自动3px；
列表样式：无；
最大宽度：600px；
填充：0；
显示：表格；
}
.选择颜色li{
框大小：边框框；
显示：块；
浮动：左；
字母间距：0；
高度：50px；
宽度：50px；
边界半径：5px；
利润率：0.5px10px；
光标：指针；
}
瑞德先生{
背景:#FF6961；
}
格林先生{
背景#77DD77；
}
蓝先生{
背景：欧洲中央银行；
}
.选定{
边框：5px实心#fff；
}
钮扣{
边界：无；
背景：#243949；
字体大小：粗体；
颜色：白色；
盒影：0 3px#242340；
边缘底部：20px；
}
.新颜色btn{
高度：47px；
宽度：125px；
边界半径：5px；
}
.添加颜色{
宽度：330px；
高度：150像素；
背景：#fff；
保证金：0自动；
边缘底部：20px；
边界半径：5px；
显示：无；
}
.添加颜色：在{
内容：“；
宽度：0；
身高：0；
边界：10px固体；
边框颜色：透明透明#fff透明；
位置：绝对位置；
左边距：-10px；
利润上限：-20px；
}
.颜色预览{
宽度：100px；
高度：100px；
背景：#000；
边界半径：5px；
利润率：10px；
浮动：左；
}
.rgb滑块{
浮动：对；
文本对齐：右对齐；
利润率：5px10px0；
}
.rgb滑块p{
边际：12px0；
}
.rgb滑块输入{
宽度：130px；
}
.rgb滑块标签{
位置：相对位置；
底部：5px；
}
.添加颜色btn{
宽度：100%；
高度：35px；
边界半径：0 0 5px 5px；
边缘顶部：5px；
}






新颜色

红色


绿色


蓝色

添加颜色
Firefox和IE在解释
位置：绝对
元素时没有
left
属性，这两个元素之间存在差异。这似乎是由前面元素的CSS属性引起的

为确保每个浏览器以所需的方式解释位置，请在属性
left:50%
之前添加颜色。它已经用
10px
负边距正确偏移

例子

var$colorplate=$（“.select color-ul”）；
var$canvas=$（“#canvas”）；
var ctx=$canvas[0].getContext（“2d”）；
var mouseDown=false；
$colorPalette.on（“单击”，“li”，函数（））{
选择颜色（$（this））；
});
功能选择颜色（e）{
e、 兄弟姐妹（）.removeClass（“选定”）；
e、 addClass（“选定”）；
}
$（“.new color btn”）。单击（“单击”，函数（）{
$（“.add color”）.toggle（）；
});
$（“.rgb滑块输入”）.change（函数（）{
$（“.color preview”）.css（“背景”，currentColor（））；
})
函数currentColor（）{
var r=$（“#红色”）.val（）；
var g=$（“#绿色”）.val（）；
var b=$（“#蓝”）.val（）；
var color=“rgb”（“+r+”、“+g+”、“+b+”）；
返回颜色；
}
$（“.add color btn”）。在（“单击”，函数（）上）{
var$newColor=$（“
”）；
$newColor.css（“背景”，currentColor（））；
$colorplate.append（$newColor）；
选择颜色（$newColor）；
$（“.add color”）.toggle（）；
});
$canvas.mousedown（函数（e）{
lastEvent=e；
mouseDown=true；
}).mousemove（函数（e）{
如果（鼠标向下）{
ctx.beginPath（）；
ctx.moveTo（lastEvent.offsetX，lastEvent.offsetY）；
ctx.lineTo（e。