странное различие между mozilla, internet explorer и шириной пикселя Safari

Question

Справа для начала. Я знаю, что все браузеры показывают входы на несколько разных ширинах, и это то, что меня не волнует, но меня что-то раздражает.

У меня есть кнопка div справа от ввода. Теперь я использую jquery для изменения размера входной ширины до той же ширины, что и другие другие входы без кнопки.

Теперь в mozilla firefox он работает так, как ожидалось, но в Internet Explorer и Safari моя ширина выходит шире, чем у моих других входов 300 пикселей, хотя jquery получает правильный расчет.

В основном, что я делаю, я получаю ширину ввода, например, 300 пикселей, тогда я получаю ширину моей кнопки div, которая составляет 20 пикселей. Затем я делаю подсчет 300-20 = 280 пикселей. Затем я установил свой вход на 280px и добавлю кнопку div, которая должна содержать до 300 пикселей; снова, но почему-то в 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, но затем две внутренние границы добавляли до 2px. Однако он отлично работал в мозилле. Теперь новый код работает во всех браузерах.

Новый код, который я добавил, имеет бордюрный: 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);