Bug Tracker

Ticket #5520: box_model_test6.html

File box_model_test6.html, 2.1 KB (added by whale, 11 years ago)

illustration of the offset bug occurring under IE8 box-sizing: border-box model

Line 
1<!-- first line puts IE6 + IE7 in quirks mode (but not IE8) -->
2<?xml version="1.0" encoding="utf-8"?>
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
5
6<head>
7
8<title>Box Model Test</title>
9
10<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
11<!-- this forces IE8 to strict mode-->
12<meta http-equiv="X-UA-Compatible" content="IE=8" />
13
14<style type="text/css">
15html, body {
16        margin: 0;
17        padding: 0;
18}
19* {
20        box-sizing: border-box;
21        -moz-box-sizing: border-box;
22        -ms-box-sizing: border-box;
23        -webkit-box-sizing: border-box;
24}
25</style>
26
27<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
28
29</head>
30
31<body>
32
33<div style="height: 600px; background: pink; border: 100px solid green;">
34spacer<br/>
35<script type="text/javascript">
36document.write("doc mode: "+document.documentMode+"<br/>");
37</script>
38jQuery boxModel: <span id="boxModel"></span>
39</div>
40
41first line ...
42
43<div style="position: relative;">
44
45<div style="height: 200px; background: pink; border: 20px solid green; padding: 20px;">
46spacer 2
47</div>
48
49<form>
50        <input type="text" id="textInput" name="input" />
51</form>
52
53offsetTop: <span id="offsetTop"></span><br/>
54offsetLeft: <span id="offsetLeft"></span><br/>
55offsetParentTop: <span id="offsetParentTop"></span><br/>
56offsetParentLeft: <span id="offsetParentLeft"></span><br/>
57
58</div>
59
60<script type="text/javascript">
61$(document).ready(function() {
62        // write jQuery boxModel info
63        if ($.support.boxModel) {
64                $('#boxModel').html('content-box');
65        } else {
66                $('#boxModel').html('border-box');
67        }
68       
69        //
70        $('#textInput').hover(
71                function(event) {
72                        $('#offsetTop').html($('#textInput').offset().top);
73                        $('#offsetLeft').html($('#textInput').offset().left);
74
75                        $('#offsetParentTop').html($('#textInput').offsetParent().offset().top);
76                        $('#offsetParentLeft').html($('#textInput').offsetParent().offset().left);
77                }
78        );
79});
80</script>
81
82</body>
83</html>