さて、この 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 で読み込まれたときに異なる高さが表示されます。
なぜこれが起こっているのか知っている人はいますか?