img、ffとsafariでボタンのタグが異なって表示される

Question

私は自分で修正できないような問題があります。

実際の問題に編集します。

FFとSafariでボタンタグの表示方法が異なります。 クロムには、余分な隠しパッドや余白がありません。

jsfiddle

クロムの画像が良いと均等に分散され、すべての要素（赤borded）を充填し、いかなるホワイトスペースはどこにも残っていません。

Safariは左側のスペースを残します。 firefoxの は、左側と上部にいくらかのスペースを残しています。

safari/ffoxのボタンタグを具体的にターゲットにして問題を解決するにはどうすればよいですか？

CSS

.vlp_s_container { 
    position: relative; 
    /* height: 132px; */ 
    border: 1px solid red; 
/* background-color: yellow; */ 
    width:206px; 
} 
/* Zoom In #1 */ 
.vlp_s_hover01 .vlp_s_fig .vlp_s_img { 
/* padding: 0px; */ 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 

.vlp_s_hover01 .vlp_s_fig:hover .vlp_s_img { 
    -webkit-transform: scale(1.2); 
    transform: scale(1.2); 
} 

.vlp_s_button { 
    padding: 0px; 
    margin-top: 0px; 
    line-height: normal; 
    display: block; 
    border: none; 
    text-decoration: none; 
} 

.vlp_s_button:hover { 
    cursor: pointer; 
} 
.vlp_s_img { 
    width: 206px; 
    height: 116px; 
    padding:0px; 
    margin:0px; 

} 

.vlp_s_fig { 
    width: 206px; 
    height: 116px; 
    margin: 0; 
    padding: 0; 
    background: #fff; 
    overflow: hidden; 
} 

HTML

<div class="vlp_s_container" title="Watch This" 
      id="abc"> 
      <div class="vlp_s_hover01 vlp_s_column"> 
       <figure class="vlp_s_fig"> 

        <div> 
         <button class="vlp_s_button"> 
          <img class="vlp_s_img" 
           src="https://upload.wikimedia.org/wikipedia/commons/7/76/Jenson_Button_2014_Singapore_FP2.jpg"> 
         </button> 
        </div> 

       </figure> 
      </div> 
     </div> 

Answer 1

私はFirefoxが<button>タグに独自のパディングとマージンを持っており、このCSSを使用すると、Firefoxの

CSSの問題を解決するために働くことが判明しました

button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
}