设计在firefox中扭曲

Question

我需要什么（在所有浏览器中只能使用chrome）

我得到了什么（在Firefox和Internet Explorer中）

我已经尝试找到创建问题的代码，但没有成功。但是，如果有任何帮助，我已经创造了一个小提琴

.graph {
    bottom: 1rem;
    display: inline-block;
    margin-top: 3rem;
    position: relative;
    width: 17rem;
}
body {
    font-family: LatoLight;
}
html {
    font-family: LatoLight;
    font-size: 125%;
}
.sections_green {
    height: 0.3rem;
}
.green {
    background-color: #accb3d;
    display: inline-table;
}
.yellow {
    background-color: #fec919;
    display: inline-table;
}
.orange {
    background-color: #fe8f10;
    display: inline-table;
}
.red_dull {
    background-color: #f98685;
    display: inline-table;
}
.red {
    background-color: #ed5f56;
    display: inline-table;
}
.sections_red {
    height: 0.3rem;
}
.arrow_box_green_bottom:after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #accb3d rgba(136, 183, 213, 0) rgba(136, 183, 213, 0);
    border-image: none;
    border-right: 0.5rem solid rgba(136, 183, 213, 0);
    border-style: solid;
    border-width: 0.5rem;
    content:" ";
    height: 0;
    left: 50%;
    margin-left: -0.5rem;
    pointer-events: none;
    position: absolute;
    top: 100%;
    width: 0;
}
.arrow_box_green_bottom {
    background: none repeat scroll 0 0 #accb3d;
    color: #fff;
    display: inline-block;
    font-size: 1rem;
    font-weight: bold;
    height: 1.5rem;
    left: 6rem;
    position: absolute;
    text-align: center;
    top: -1.3rem;
    width: auto;
}

<div class="graph">
    <div style="width: 5rem" class="sections_red red"></div>
    <div style="width: 5rem" class="sections_green red_dull"></div>
    <div style="width: 5rem" class="sections_green green">
        <div style="left: 10rem;" class="arrow_box_green_bottom">65</div>
    </div>
</div>

Js fiddle

请指出我出错的地方

Answer 1

您可以稍微改变您的标记，使用pseudo元素来减少您的标记：

注意

---

Jquery已经 用于实现“添加”＃39;和＆＃39;减去＆＃39;按钮，与视觉无关

---

使用css伪元素和框阴影的组合，您可以非常有效地生成这种跨浏览器设计：

＆＃13;

＆＃13;

$('#minus').click(function(){
  var cur = parseInt($('.marker').css("left"));
  $('.marker').text(cur);
  $('.marker').css("left", cur - 10 + "px");
  });
$('#add').click(function(){
  var cur = parseInt($('.marker').css("left"));
  $('.marker').text(cur);
  $('.marker').css("left", cur + 10 + "px");
  });

＆＃13;

.line{
  margin-top:60px;
  height:20px;
  width:100px;
  background:green;
  position:relative;
  margin-left:20px;
  box-shadow:  105px 0 yellow, 210px 0 red;
  }

.marker{
  position:absolute;
  height:40px;
  width:40px;
  background:blue;
  top:-60px;
  left:0;
  text-align:center;
  }
.marker:before{
  content:"";
  position:absolute;
  width:0px;
  border-top:20px solid blue;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  bottom:-20px;
  left:0;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="line">
  <div class="marker">50</div>
</div>

<br/>
<button id="minus">-</button>
<button id="add">+</button>

＆＃13;

＆＃13;

＆＃13;

---

fiddle for thought