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;和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);

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

2 个答案: