[HTML 5] Vérification d'un champ avec 8 chiffres Incompatible avec un HTA et IE7

:salut: je suis sous windows xp sp3 avec IE7
J'ai ce code qui marche bien dans Firefox mais ne marche sur IE7 et dans un HTA
Est-ce-qu'il est possible de le faire marcher avec un HTA ou il faut un IE9 ou bien IE10 :koi:
:merci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!doctype html>
<html lang="fr">
<meta http-equiv="x-ua-compatible" content="ie=9">
<META HTTP-EQUIV="MSThemeCompatible" CONTENT="YES">
<title>Verification de votre CIN avec 8 chiffres exactement en HTML5</title>
<head>
<meta charset="utf-8" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
</head>
<style>
        body{
          background-image: url(background.png);
          font-family: 'Open Sans',sans-serif;
          font-weight: 400;
          font-size: 13px;
        }
 
        :invalid {
          background-color: #F0DDDD;
          border-color: #e88;
          -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
          -moz-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
          -o-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
          -ms-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
          box-shadow:0 0 5px rgba(255, 0, 0, .8);
        }
 
        :required {
          border-color: #88a;
          -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
          -moz-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
          -o-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
          -ms-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
          box-shadow: 0 0 5px rgba(0, 0, 255, .5);
        }
 
        form {
          width:300px;
          margin: 20px auto;
        }
 
        input {
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          border:1px solid #ccc;
          font-size:20px;
          width:300px;
          min-height:30px;
          display:block;
          margin-bottom:15px;
          margin-top:5px;
          outline: none;
 
          -webkit-border-radius:5px;
          -moz-border-radius:5px;
          -o-border-radius:5px;
          -ms-border-radius:5px;
          border-radius:5px;
        }
 
        input[type=submit] {
          background:none;
          padding:10px;
          cursor: pointer;
        }
 
        label{
          cursor: pointer;
        }
    </style>
 
<body>
<center><b><h1>CIN :</h1></b><input type="text" id="CIN" name="CIN" required pattern="[0-9]{8}" title="Tapez dans ce champ 8 chiffres exactement"/>
</body>
</html>