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> 

小提琴

请指出我要去哪里了

Answer 1

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

注意

---

jQuery 仅用于实现“添加”和“减号”按钮， 与视觉效果无关

---

结合使用css伪元素和框阴影，可以相当有效地生成这种跨浏览器设计：

 $('#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"); }); 

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

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

---

摆弄思想