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

Question

我一直在做这个小练习元素，我让大部分东西看起来都一样，尽管输入有点麻烦。

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

这是一个Codepen以下:

箭头是用 .add-color:before 创建的。

var $colorPalette = $(".select-color ul");
var $canvas = $("#canvas");
var ctx = $canvas[0].getContext("2d");
var mouseDown = false;

$colorPalette.on("click", "li", function() {
  selectColor($(this));
});

function selectColor(e) {
  e.siblings().removeClass("selected");
  e.addClass("selected");
}

$(".new-color-btn").click("click", function() {
  $(".add-color").toggle();
});

$(".rgb-sliders input").change(function() {
  $(".color-preview").css("background", currentColor());
})

function currentColor() {
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();
  var color = "rgb(" + r + "," + g + "," + b + ")";

  return color;
}

$(".add-color-btn").on("click", function() {
  var $newColor = $("<li></li>");
  $newColor.css("background", currentColor());
  $colorPalette.append($newColor);
  selectColor($newColor);
  $(".add-color").toggle();
});

$canvas.mousedown(function(e) {
  lastEvent = e;
  mouseDown = true;
}).mousemove(function(e) {
  if (mouseDown) {
    ctx.beginPath();
    ctx.moveTo(lastEvent.offsetX, lastEvent.offsetY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.strokeStyle = $(".selected").css("background-color");
    ctx.lineWidth = $("#line-size").val();
    ctx.lineJoin = ctx.lineCap = 'round';
    //context.globalAlpha = $("#opacitySlider").val() / 10;
    ctx.stroke();
    lastEvent = e;
  }
}).mouseup(function() {
  mouseDown = false;
}).mouseleave(function() {
  $canvas.mouseup();
});

body {
  background: linear-gradient(90deg, #517fa4 10%, #243949 90%);
}
canvas {
  display: block;
  background: #fff;
  margin: 10px auto;
  border-radius: 5px;
  cursor: url("http://i.imgur.com/ciZXEOf.png"), default;
}
.controls {
  text-align: center;
  margin: 0 auto;
}
.line-slider #line-size {
  width: 250px;
}
.line-slider:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: -5px;
  right: 5px;
  height: 15px;
  width: 2px;
  background: #fff;
}
.line-slider:after {
  content: " ";
  display: inline-block;
  position: relative;
  top: -5px;
  left: 5px;
  height: 15px;
  width: 6px;
  background: #fff;
}
.select-color ul {
  margin: 0px auto 3px;
  list-style: none;
  max-width: 600px;
  padding: 0;
  display: table;
}
.select-color li {
  box-sizing: border-box;
  display: block;
  float: left;
  letter-spacing: 0;
  height: 50px;
  width: 50px;
  border-radius: 5px;
  margin: 0 5px 10px;
  cursor: pointer;
}
.red {
  background: #FF6961;
}
.green {
  background: #77DD77;
}
.blue {
  background: #779ECB;
}
.selected {
  border: 5px solid #fff;
}
button {
  border: none;
  background: #243949;
  font-weight: bold;
  color: white;
  box-shadow: 0 3px #242340;
  margin-bottom: 20px;
}
.new-color-btn {
  height: 47px;
  width: 125px;
  border-radius: 5px;
}
.add-color {
  width: 330px;
  height: 150px;
  background: #fff;
  margin: 0 auto;
  margin-bottom: 20px;
  border-radius: 5px;
  display: none;
}
.add-color:before {
  content: " ";
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  margin-left: -10px;
  margin-top: -20px;
}
.color-preview {
  width: 100px;
  height: 100px;
  background: #000;
  border-radius: 5px;
  margin: 10px;
  float: left;
}
.rgb-sliders {
  float: right;
  text-align: right;
  margin: 5px 10px 0 0;
}
.rgb-sliders p {
  margin: 12px 0;
}
.rgb-sliders input {
  width: 130px;
}
.rgb-sliders label {
  position: relative;
  bottom: 5px;
}
.add-color-btn {
  width: 100%;
  height: 35px;
  border-radius: 0 0 5px 5px;
  margin-top: 5px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<canvas width="600px" height="400px" id="canvas"></canvas>
<div class="controls">
  <div>
    <span class="line-slider"><input id="line-size" name="line-size" type="range" min=2 max=14 value=5></span>
  </div>
  <div class="select-color">
    <ul>
      <li class="red selected"></li>
      <li class="green"></li>
      <li class="blue"></li>
    </ul>
  </div>
  <div class="new-color">
    <button class="new-color-btn">New Color</button>
    <div class="add-color">
      <span class="color-preview"></span>
      <div class="rgb-sliders">
        <p>
          <label for="red">Red</label>
          <input id="red" name="red" type="range" min=0 max=255 value=0>
        </p>
        <p>
          <label for="green">Green</label>
          <input id="green" name="green" type="range" min=0 max=255 value=0>
        </p>
        <p>
          <label for="blue">Blue</label>
          <input id="blue" name="blue" type="range" min=0 max=255 value=0>
        </p>
      </div>
      <div>
        <button class="add-color-btn">Add Color</button>
      </div>
    </div>
  </div>
</div>

箭头在 FF 中也很丑，但在 IE 和 chrome 中很好，不知道这是为什么。

Answer 1

Firefox 和 IE 在解释没有 left 属性的 position: absolute 元素时存在差异。这似乎是由前面元素的 CSS 属性引起的。

为确保每个浏览器都以所需方式解释位置，请为 .add-color:before 属性 left: 50%。它已经正确偏移了 10px 负边距。

例子

var $colorPalette = $(".select-color ul");
var $canvas = $("#canvas");
var ctx = $canvas[0].getContext("2d");
var mouseDown = false;

$colorPalette.on("click", "li", function() {
  selectColor($(this));
});

function selectColor(e) {
  e.siblings().removeClass("selected");
  e.addClass("selected");
}

$(".new-color-btn").click("click", function() {
  $(".add-color").toggle();
});

$(".rgb-sliders input").change(function() {
  $(".color-preview").css("background", currentColor());
})

function currentColor() {
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();
  var color = "rgb(" + r + "," + g + "," + b + ")";

  return color;
}

$(".add-color-btn").on("click", function() {
  var $newColor = $("<li></li>");
  $newColor.css("background", currentColor());
  $colorPalette.append($newColor);
  selectColor($newColor);
  $(".add-color").toggle();
});

$canvas.mousedown(function(e) {
  lastEvent = e;
  mouseDown = true;
}).mousemove(function(e) {
  if (mouseDown) {
    ctx.beginPath();
    ctx.moveTo(lastEvent.offsetX, lastEvent.offsetY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.strokeStyle = $(".selected").css("background-color");
    ctx.lineWidth = $("#line-size").val();
    ctx.lineJoin = ctx.lineCap = 'round';
    //context.globalAlpha = $("#opacitySlider").val() / 10;
    ctx.stroke();
    lastEvent = e;
  }
}).mouseup(function() {
  mouseDown = false;
}).mouseleave(function() {
  $canvas.mouseup();
});

body {
  background: linear-gradient(90deg, #517fa4 10%, #243949 90%);
}

canvas {
  display: block;
  background: #fff;
  margin: 10px auto;
  border-radius: 5px;
  cursor: url("http://i.imgur.com/ciZXEOf.png"), default;
}

.controls {
  text-align: center;
  margin: 0 auto;
}

.line-slider #line-size {
  width: 250px;
}

.line-slider:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: -5px;
  right: 5px;
  height: 15px;
  width: 2px;
  background: #fff;
}

.line-slider:after {
  content: " ";
  display: inline-block;
  position: relative;
  top: -5px;
  left: 5px;
  height: 15px;
  width: 6px;
  background: #fff;
}

.select-color ul {
  margin: 0px auto 3px;
  list-style: none;
  max-width: 600px;
  padding: 0;
  display: table;
}

.select-color li {
  box-sizing: border-box;
  display: block;
  float: left;
  letter-spacing: 0;
  height: 50px;
  width: 50px;
  border-radius: 5px;
  margin: 0 5px 10px;
  cursor: pointer;
}

.red {
  background: #FF6961;
}

.green {
  background: #77DD77;
}

.blue {
  background: #779ECB;
}

.selected {
  border: 5px solid #fff;
}

button {
  border: none;
  background: #243949;
  font-weight: bold;
  color: white;
  box-shadow: 0 3px #242340;
  margin-bottom: 20px;
}

.new-color-btn {
  height: 47px;
  width: 125px;
  border-radius: 5px;
}

.add-color {
  width: 330px;
  height: 150px;
  background: #fff;
  margin: 0 auto;
  margin-bottom: 20px;
  border-radius: 5px;
  display: none;
}

.add-color:before {
  content: " ";
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  margin-left: -10px;
  margin-top: -20px;
  left: 50%;
}

.color-preview {
  width: 100px;
  height: 100px;
  background: #000;
  border-radius: 5px;
  margin: 10px;
  float: left;
}

.rgb-sliders {
  float: right;
  text-align: right;
  margin: 5px 10px 0 0;
}

.rgb-sliders p {
  margin: 12px 0;
}

.rgb-sliders input {
  width: 130px;
}

.rgb-sliders label {
  position: relative;
  bottom: 5px;
}

.add-color-btn {
  width: 100%;
  height: 35px;
  border-radius: 0 0 5px 5px;
  margin-top: 5px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="controls">
<canvas width="600px" height="400px" id="canvas"></canvas>
  <div>
    <span class="line-slider"><input id="line-size" name="line-size" type="range" min=2 max=14 value=5></span>
  </div>
  <div class="select-color">
    <ul>
      <li class="red selected"></li>
      <li class="green"></li>
      <li class="blue"></li>
    </ul>
  </div>
  <div class="new-color">
    <button class="new-color-btn">New Color</button>
    <div class="add-color">
      <span class="color-preview"></span>
      <div class="rgb-sliders">
        <p>
          <label for="red">Red</label>
          <input id="red" name="red" type="range" min=0 max=255 value=0>
        </p>
        <p>
          <label for="green">Green</label>
          <input id="green" name="green" type="range" min=0 max=255 value=0>
        </p>
        <p>
          <label for="blue">Blue</label>
          <input id="blue" name="blue" type="range" min=0 max=255 value=0>
        </p>
      </div>
      <div>
        <button class="add-color-btn">Add Color</button>
      </div>
    </div>
  </div>
</div>