Google ChromeとMozillaでcss3を使用する

Question

私のコードに問題があります。

あなたがそれを見ることができます：Google Chromeで

をあなたは数字を置くと、彼らはOKに見えますが、Mozillaでは右側が飛びます。

擬似要素::を使用しないでFigureをdivから描画することができます。

私はMozillaとChrome用に別々のスタイルを作ってみましたが、とても長いコードです。私はそれを行う簡単な方法があると思います。

$(document).ready(function() { 
 
\t \t $('.name_of_direction_2').each(function() { 
 
\t \t  $(this).mouseenter(function() { 
 
\t \t  $(this).attr('class', 'name_of_direction_2_hover'); 
 
\t \t  $(this).on("mouseleave", function() { 
 
\t \t   $(this).attr('class', 'name_of_direction_2'); 
 
\t \t  }); 
 
\t \t  }); 
 
\t \t }); 
 
\t \t });

.name_of_direction_2 { 
 
    color: black; 
 
    font-size: 22px; 
 
    margin-left: 100px; 
 
    margin-top: 20px; 
 
    font-weight: bold; 
 
    list-style-type: none; 
 
    cursor: pointer; 
 
    height: 32px; 
 
} 
 

 
.direction_2 > li > div { 
 
    display: inline-block; 
 
} 
 

 
.name_of_direction_2_hover { 
 
    /* \t display: none;*/ 
 
    color: black; 
 
    font-size: 22px; 
 
    margin-left: 100px; 
 
    margin-top: 20px; 
 
    font-weight: bold; 
 
    list-style-type: none; 
 
    cursor: pointer; 
 
    height: 32px; 
 
} 
 

 
.name_of_direction_2_hover > div { 
 
    display: inline-block; 
 
    background-color: #c69c6d; 
 
    color: white; 
 
    height: 32px; 
 
    padding: 5px 10px; 
 
} 
 

 
.name_of_direction_2_hover > div > span { 
 
    display: flex; 
 
    align-items: center; 
 
    /*justify-content: center;*/ 
 
    height: 32px; 
 
    width: 100%; 
 
} 
 

 
.name_of_direction_2_hover > div > span::after { 
 
    content: ''; 
 
    border: 21px solid transparent; 
 
    border-left: 21px solid #c69c6d; 
 
    position: absolute; 
 
    margin-left: 10px; 
 
    margin-top: -7.8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="list_of_direction_2"> 
 
    <ul class="direction_2"> 
 
    <li class="name_of_direction_2"> 
 
     <div><span>УГОЛОВНЫЕ ДЕЛА</span></div> 
 
    </li> 
 
    <li class="name_of_direction_2"> 
 
     <div><span>АРБИТРАЖНЫЕ СПОРЫ</span></div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

私はあなたがこのケースでフレキシボックスを使用する必要はありませんそれを http://jsfiddle.net/jyvz5w8e/

.name_of_direction_2_hover > div > span { 
    position: relative; 
    height: 32px; 
} 

.name_of_direction_2_hover > div > span::after { 
    content: ''; 
    border: 21px solid transparent; 
    border-left: 21px solid #c69c6d; 
    position: absolute; 
    right: -50px; 
    top: -5px; 
} 

を行う方法を共有しています。

さらに、絶対位置を使用する場合、父親の相対位置を定義する必要があります。