mozillaとInternet ExplorerとSafariのピクセル幅の間に奇妙な違いがあります

Question

私はすべてのブラウザがわずかに異なる幅で入力を表示していることを知っていますが、それは私を心配しないものですが、

入力の右側にdivボタンがあります。今では、jqueryを使用して、入力幅をボタンなしで他の入力と同じ幅に変更しています。

mozilla firefoxでは、期待通りに動作しますが、Internet ExplorerとSafariでは、jqueryが正しい計算を取得しても、他の300px入力よりも幅が広がります。

基本的に私は入力の幅を取得します（例：300px）。その後、ボタンのdivの幅は20pxになります。 次に、私は計算300-20 = 280pxを行います。入力を280pxに設定し、divボタンをオンにします（これは300pxまで追加する必要があります）。再びSafariでは何らかの理由で300pxの入力よりも広いです。

私の質問がはっきりしていることを望みますが、必要に応じてさらに情報を追加できます。ここで

は私のhtml

<label class="myform w9" for="name">Req' Delivery Date</label> 
<input class="contactinput yellow w22 inputImage fe" type="text" id="po_requireddeliverydate" placeholder="Required field" readonly/> 
<div id="clear_podate" class="inputWrapDelete"></div> 

私のcss

.inputWrap{ 
    display:flex; 
    display:-webkit-flex; 
    display: -ms-flexbox; 
    margin-bottom:8px; 
} 
.inputWrapDelete{ 
    width: 20px; 
    height: 20px; 
    cursor: pointer; 
    background-image: url(../../images/buttons/buttons_25x25.png); 
    border-radius: 0 5px 5px 0; 
    border: 2px solid #009900; 
    background-color: #090; 
} 
.fe 
{ 
    border-radius: 5px 0 0 5px; 
} 
.contactinput{ 
    border-radius: 5px; 
    border: 2px solid #009900; 
    height: 20px; 
    padding-left: 5px; 
} 
.w22 
{ 
width:300px; 
} 

私のjqueryの

$(".inputImage").each(function(){ 
     $(this).width($(this).width()-$(this).next().width()); 
     $(this).add($(this).next()).wrapAll('<div class="inputWrap"></div>'); 

}); 

Answer 1

私は私の問題を解決しました。 問題は境界でした。あなたはjqueryで正しい答えを得ているのを見ていますが、2つの内側の境界線が2ピクセルになっています。しかし、それはmozillaでうまくいきました。新しいコードはすべてのブラウザで動作します。

私が追加した新しいコードは、border-left：0です。 border-right：0;

.inputWrapDelete{ 
    width: 20px; 
    height: 20px; 
    cursor: pointer; 
    background-image: url(../../images/buttons/buttons_25x25.png); 
    border-radius: 0 5px 5px 0; 
    border: 2px solid #009900; 
    background-color: #090; 
    border-left:0; 
} 
.fe 
{ 
    border-radius: 5px 0 0 5px; 
    border-right:0; 
} 

を支援しようとするためにあなたのホセありがとう

Answer 2

ええ、それは最後の幅、奇妙として290を取得している...しかし、それがあれば動作しますあなたはこれを行う..

var width = $(this).width() - $(this).next().width() 
$(this).width(width);