jquery - Firefox、Internet Explorer 和 Safari 像素宽度之间的奇怪差异

Question

首先，我知道所有浏览器显示的输入宽度都略有不同，这让我不担心，但有些事情让我很烦。

我在输入的右侧有一个 div 按钮。现在，我正在使用 jQuery 将我的输入宽度调整为与其他没有按钮的输入相同的宽度。

现在在 Firefox 中它按预期工作，但在 Internet Explorer 和 Safari 中我的宽度比我的其他 300px 输入更宽，即使 jQuery 得到正确的计算。

基本上，我所做的是获取输入的宽度，例如 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 中得到了正确的答案，但是两个内边框加起来是 2px。然而，它在 Firefox 中运行良好。现在新代码适用于所有浏览器。

我添加的新代码是 border-left:0;和右边界: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;
}