mozilla，Internet Explorer和Safari像素寬度之間的奇怪區別

開始的權利我知道所有的瀏覽器都會以略有不同的寬度顯示輸入，這是我不擔心的事情，但有些令我煩惱。mozilla，Internet Explorer和Safari像素寬度之間的奇怪區別

我有一個輸入右側的div按鈕。現在我正在使用jquery將我的輸入寬度調整爲與沒有按鈕的其他輸入相同的寬度。

現在在Mozilla Firefox中，它按預期工作，但在Internet Explorer和Safari中，我的寬度比我的其他300px輸入寬，即使jquery得到正確的計算。

基本上我做什麼我得到輸入的寬度，例如300px然後我得到我的按鈕div的寬度是20px。然後我做一個calcualation 300-20 = 280px。然後我設置我的輸入爲280px，並添加我的div按鈕，這應該加起來300px;再次，但由於某種原因在Safari瀏覽器比我的300像素輸入寬。

我希望我的問題很清楚，但如果需要，我可以添加更多信息。

這裏是我的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>'); 

});

來源

2016-05-14 Thomas Williams

我已經解決了我的問題。問題在於邊界。你看到我在jquery中得到了正確的答案，但是這兩個內部邊界合計爲2px。但在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; 
}

謝謝何塞試圖幫助

來源

2016-05-14 02:55:57

是的，它得到290最終寬度，奇怪的...但它的工作原理，如果你這樣做..

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

來源

2016-05-14 02:41:48

mozilla，Internet Explorer和Safari像素寬度之間的奇怪區別

回答

相關問題