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像素宽度之间的奇怪区别

回答

相关问题