設計在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有僅被用來實現 '加' 和 '減' 按鈕，無關的視覺效果

---

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

---

fiddle for thought