jQuery load(） 函数更改输入文本的高度

jQuery load() function changes the height of an input text

本文关键字：输入 文本 高度 load 函数 jQuery      更新时间：2023-09-26

好的，所以我有这个html文件（sec1_2.html）。

<body>
<div id="nameContainer">
    <input id="sect1Name">
</div>  
<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
    }
    div#nameContainer {
        background: none repeat scroll 0% 0% #000;
        height: 50px;
        padding: 0;
        margin: 0;
    }
    input#sect1Name {
        width: 330px;   
        margin: 0;
        height: 50px;
        padding: 0;
    }
</style>

是一个简单的div，里面有一个输入。如您所见，div 和输入的高度相同 （50px）。因此，当您显示此页面时，您会在完全相同的高度获得div 内的输入。

但是，现在我有这个另一个html（索引.html）：

<!DOCTYPE html>
<html>
<body>
    <div id="section1">
</div>      
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    $("#section1").load("sec1_2.html");
</script>
</body>

现在，在这里，我有一个空的div，我在其中加载外部html（sec1_2.html）。当我这样做时，输入上的（可见）高度会增加！

我不知道为什么输入会改变，如果让输入没有高度，两个版本都显示相同的高度（默认），但是如果我设置了定义的高度，加载jQuery时它会显示不同的高度。

有人知道为什么会这样吗？

嗨，

由于某种原因，您的输入在没有一个默认属性的情况下使用 Jquery 调用呈现，您可以将其添加到您的 CSS 中：

input#sect1Name {
  box-sizing:border-box;
}

此属性在 html 中被指定为 default，但不使用 Jquery。

http://plnkr.co/edit/6h8U9AQgFaNUb2plPbh6?p=preview

相关文章：