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>

ここに、外部 html (sec1_2.html) をロードする空の div があります。このようにすると、入力の（目に見える）高さが上がります！

高さのない入力を許可すると、両方のバージョンで同じ高さ (デフォルト) が表示されますが、定義された高さを設定すると、jQuery で読み込まれたときに異なる高さが表示されます。

なぜこれが起こっているのか知っている人はいますか？

4

1 に答える 1