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

Question

我一直致力于这个小练习项目，即使输入有点痛苦，我也让大部分内容看起来都一样。

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

以下是Codepen以下内容：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

箭头在FF中也很难看，但在IE和Chrome中很不错，不知道为什么会这样。

Answer 1

Firefox和IE在没有position: absolute属性的情况下解释left元素的方式有所不同。这似乎是由前一个元素的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>