0

好的，所以我有这个 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 (index.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 时显示不同的高度。

任何人都知道为什么会这样？

4

1 回答 1

0

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

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

此属性在 html 中被分配为默认值，但在 Jquery 中未分配。

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

于 2013-10-31T13:42:58.260 回答