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

Question

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

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

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

基本上我会得到输入的宽度，例如 300 像素，然后我得到按钮 div 的宽度，即 20 像素。然后我计算 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;和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);